[RÉSOLU] Afficher deux produits sur la même ligne

[Finals]

Bonjour,

Je souhaite afficher deux produits sur la même ligne en version mobile.

Pour info, j'utilise Elementor de Creative Elements. 

Lorsque j'essaye d'ajouter une largeur : 50 %, je me rapproche du résultat mais le deuxième produit ne se place pas à droite

 

Merci d'avance,

 

Type d'installation (nouvelle/MàJ) : MàJ
Version de PS : 1.7.7.4

URL du site concerné : https://sevenroses.fr/
Thème (défaut/perso) : Thème Bijoux Online
Code (original/modifié) : original
Hébergement : Ionos
Version de PHP : 7.3.33
Version de MySQL : 5.7.41-log
Navigateur(s) concerné(s) :

Edited February 18, 2024 by Finals (see edit history)

[Eolia]

width:50%;float:left;

[Finals]

Merci pour la réponse,

Sur quelle classe ou élément, j'applique ce css ? 

[Eolia]

sur celui où vous avez mis 50%

[Mediacom87]

À mon avis, avec elementor, vous ne devriez pas toucher au CSS mais simplement lui dire de mettre deux produits par ligne sur mobile, si vous ne savez pas comment faire n'hésitez pas à faire appel au support soit de votre thème, soit d'elementor.

[Finals]

Merci pour vos retours,

@meewii m'a apporté la réponse ! 

Merci à lui et à vous tous !

 

Je clos le sujet

[Eolia]

oui un col-xs-6 ce qui revient au float:left;width:50%  

[Mediacom87]

il y a 14 minutes, Finals a dit :

Merci pour vos retours,

@meewii m'a apporté la réponse ! 

Merci à lui et à vous tous !

 

Je clos le sujet

Et la communauté aurait elle le droit de connaître la réponse apportée par ce compte qui n’a qu’une heure d’existence ?

[Eolia]

La réponse ici: https://sevenroses.fr/9-vetements

[Mediacom87]

il y a 15 minutes, Eolia a dit :

La réponse ici: https://sevenroses.fr/9-vetements

Merci, j'ai bien compris la modification, mais comme suggéré, cette modification, s'est-elle, faite simplement en sélectionnant cette option sur elementor ou il a fallu modifier le code d'un fichier spécifique et si oui, lequel.

[Eolia]

On peut décider des classes utilisées dans Elementor

[Finals]

Bonjour,

C'est directement dans le custom.css en ajoutant ceci :

 

@media (max-width:768px){

.elementor.elementor-11170201.col-xs-6.col-xl-3 {

  width: 50%;

}

.elementor-element.elementor-element-69d004c0.elementor-column.elementor-col-100.elementor-top-column {

  padding: 0;

  font-size: 14px;

}

.ce-product-name.elementor-heading-title a {

  font-size: 15px !important;

}

.elementor.elementor-11170201.col-xs-6.col-xl-3 {

  padding: 0 6px;

 }

}