Bonjour,

il faut ajouter dans le CSS les propriétés suivantes pour la largeur inférieure à 768px si c'est la largeur choisie, 

.vc_column_container>.vc_column-inner {
     padding-left: 0px;
     padding-right: 0px;
}

.vc_column_container>.vc_column-inner {
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
}

le problème c'est que sur mobile c'est nickel mais sur pc il n'y a plus d'espace entre les images. 

oui j'ai précisé qu'il fallait enlever le padding pour la largeur inférieure à 768px, donc en utilisant les media queries

ainsi il y aura du padding sur desktop et pas de padding sur smartphone

tu n'as pas utilisé les media queries je suppose ?

si merci c'est bon je l'ai ajouter regarde.  

tu sais comment je pourrais devisé par deux cet espace sur pc & mobile ?

-
Edité par VictorBonomie-amort 19 décembre 2021 à 13:38:11

Bonjour,

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.

je viens de regarder le site, tout est bon maintenant, padding sur desktop et pas de padding pour < 768px

de quel espace parles-tu ? quel espace veux tu diviser par deux ?

Si c'est le padding left et right, alors c'est quelque part dans https://www.vapeprivate.com/wp-content/plugins/js_composer/assets/css/js_composer.min.css?ver=6.6.0

il faut faire une recherche et changer 15px en 7px, par exemple

et si tu veux mettre ce padding pour smartphone, il faut supprimer ce qu'on a ajouté tout à l'heure

A toi de dire précisément ce que tu veux

En fait il y a 2 déclarations utilisées :

.wpb_content_element.la-banner-box {
    margin-bottom: 30px;
}

qui ajoute une marge de 30px en bas de l'image, en gros

et 

.wpb_button, .wpb_content_element, ul.wpb_thumbnails-fluid>li {
    margin-bottom: 35px;
}

qui ajoute 35px

le problème c'est que la première est peu-être utilisée ailleurs, donc délicat d'y toucher,
en revanche, la seconde semble utilisée pour les thumbnails, donc seulement ici

mais elles ne sont pas utilisées dans le même fichier CSS, donc après avoir regardé en détail, ce qui marche c'est ceci :

dans https://www.vapeprivate.com/wp-content/plugins/js_composer/assets/css/js_composer.min.css?ver=6.6.0

changer 

ul.wpb_thumbnails-fluid>li{margin-bottom:35px}

en :

ul.wpb_thumbnails-fluid>li{margin-bottom:15px; !important}

et ça devrait marcher, on aura 15px seulement de marge sous les images

Est-ce que ça marche ?

oui c'est dans https://www.vapeprivate.com/wp-content/plugins/js_composer/assets/css/js_composer.min.css?ver=6.6.0

pas le même fichier CSS

quand j'ouvre le fichier ça donne ça : js_composer.min.css 

et bien tu cherches ul.wpb_thumbnails-fluid>li et tu vas voir :

ul.wpb_thumbnails-fluid>li{margin-bottom:35px}

dans le code, c'est un code minifié mais on voit bien la propriété bien qu'elle ne soit pas sur une ligne particulière

Tu sais chercher avec ton navigateur, ça doit être quelque chose comme commande + F, sur PC

ah c'est pas bon, je vais regarder sur ton site, après dîner

ah oui scuse, faute de frappe il faut écrire :

ul.wpb_thumbnails-fluid>li{margin-bottom:15px !important;}

j'ai mal posé le ";"

il doit être après !important

-
Edité par ChrisLebure 19 décembre 2021 à 19:39:40

Super ça marche. au top merci