Merci beaucoup Soka Wakata pour le partage de cette solution. J'aimerais savoir s'il est possible de définir une taille de bouton pour chaque mode (responsive). En effet, la taille de bouton que j'ai défini grâce à ta solution est parfaite pour une taille d'écran (en l'occurrence, le format ordinateur) mais elle est peu adaptée aux autres (tablettes, téléphones portables). Existe-t-il une solution à ce problème ? Merci encore.
Oui, cela est définitivement possible. Il faudra faire appel au CSS et aux Requêtes Média, ou encore Media Queries. L'instruction à utiliser sera globalement la même, sauf qu'il faudra la précéder par une directive indiquant au système quelles tailles d'écran seront affectées. La directive sera de la forme suivante : @media only screen and (max-width: [TailleMaxEcranIci]px) { .elementor-button { min-width: [LargeurSouhaitéeIci]px !important; } } Ainsi, pour définir les dimensions sur un téléphone mobile, la directive pourra prendre par exemple la forme : @media only screen and (max-width: 480px) { .elementor-button { min-width: 100px !important; } } Il faudra rajouter une telle structure pour chaque taille d'écran désirée. Typiqement, on aura donc une directive pour les ordinateurs (min-width: 1200px), les tablettes (min-width: 768px), et finalement pour les mobiles (min-width: 480px) La valeur exacte des min-width dépendra des appareils considérés, s'ils sont en portrait ou paysage, etc. Mais ce sera la voie à suivre. Voici d'autres références sur le sujet : * www.browserstack.com/guide/responsive-design-breakpoints * www.w3schools.com/Css/css_rwd_mediaqueries.asp Bonne chance. Soka
Bonjour. Si vous ne ciblez qu'un bouton en particulier, la démarche sera quand même similaire. Imaginons que l'ID de votre bouton soit "IDBouton". Pour affecter sa taille, il vous faudra 1) vous rendre dans le personnalisateur (Tableau de Bord - Apparence - Personnaliser - CSS/JS Personnalise) 2) dans la zone de personnalisation du code, saisir le code suivant #IDBouton { min-width: 300px !important; } Bien entendu, il vous faudra ajuster en fonction des valeurs propres @votre cas specifique. Vous pouvez aussi decider de n'affecter que la lrgeur des boutons se trouvant dans une section particuliere de votre site web. Si c'est le cas, le code sera du genre: #IDSection .elementor-button { min-width: 300px !important; } www.sokawakata.com/elementor-boutons-de-meme-largeur/ Bon apprentissage.
Bonjour,
Un grand merci pour cette astuce simple et très efficace.
Merci pour votre commentaire :-)
Merci beaucoup Soka Wakata pour le partage de cette solution. J'aimerais savoir s'il est possible de définir une taille de bouton pour chaque mode (responsive). En effet, la taille de bouton que j'ai défini grâce à ta solution est parfaite pour une taille d'écran (en l'occurrence, le format ordinateur) mais elle est peu adaptée aux autres (tablettes, téléphones portables). Existe-t-il une solution à ce problème ? Merci encore.
Oui, cela est définitivement possible. Il faudra faire appel au CSS et aux Requêtes Média, ou encore Media Queries. L'instruction à utiliser sera globalement la même, sauf qu'il faudra la précéder par une directive indiquant au système quelles tailles d'écran seront affectées. La directive sera de la forme suivante :
@media only screen and (max-width: [TailleMaxEcranIci]px)
{
.elementor-button
{
min-width: [LargeurSouhaitéeIci]px !important;
}
}
Ainsi, pour définir les dimensions sur un téléphone mobile, la directive pourra prendre par exemple la forme :
@media only screen and (max-width: 480px)
{
.elementor-button
{
min-width: 100px !important;
}
}
Il faudra rajouter une telle structure pour chaque taille d'écran désirée. Typiqement, on aura donc une directive pour les ordinateurs (min-width: 1200px), les tablettes (min-width: 768px), et finalement pour les mobiles (min-width: 480px)
La valeur exacte des min-width dépendra des appareils considérés, s'ils sont en portrait ou paysage, etc. Mais ce sera la voie à suivre.
Voici d'autres références sur le sujet :
* www.browserstack.com/guide/responsive-design-breakpoints
* www.w3schools.com/Css/css_rwd_mediaqueries.asp
Bonne chance.
Soka
@@sokawakata-tkno Un grand merci pour cette réponse très complète !!!
choukran on a pu ajuster les boutons au top ! al hamdoulileh
De rien :-)
Merci, c'est très clair !
Avec plaisir. Bonne succès dans vos projets.
Bjr, si j'ai mis un ID de bouton pour ne changer que leur largeur à eux, comment je rajoute cette variable dans le code ? Merci
Bonjour. Si vous ne ciblez qu'un bouton en particulier, la démarche sera quand même similaire. Imaginons que l'ID de votre bouton soit "IDBouton". Pour affecter sa taille, il vous faudra
1) vous rendre dans le personnalisateur (Tableau de Bord - Apparence - Personnaliser - CSS/JS Personnalise)
2) dans la zone de personnalisation du code, saisir le code suivant
#IDBouton
{
min-width: 300px !important;
}
Bien entendu, il vous faudra ajuster en fonction des valeurs propres @votre cas specifique.
Vous pouvez aussi decider de n'affecter que la lrgeur des boutons se trouvant dans une section particuliere de votre site web. Si c'est le cas, le code sera du genre:
#IDSection .elementor-button
{
min-width: 300px !important;
}
www.sokawakata.com/elementor-boutons-de-meme-largeur/
Bon apprentissage.