Réduire la largeur des marges gauche et droite dans le cas de la présence d’un menu vertical.

Bonjour,

Je suis un des webmasters du site « rsparisis95 » (retraite sportive du parisis), hébergé sur « e-monsite ».
http://rsparisis95.e-monsite.com/

Dernièrement, nous avons basculé sur un des nouveaux thèmes proposés « Le Bar à smoothies ».

Suite à ce basculement, nous nous aperçus que les marges gauche et droite de l’écran (dans mon cas un Mac) étaient plus importantes qu’avec l’ancien thème. Après discussion avec le support de e-monsite, les 2 marges sont évaluées à 25% de l’écran minimum (soit 12,5% pour chaque marge)

Les paramètres ci-après sont configurés de la façon suivante :
- Présence du menu vertical (sur la gauche dans motre cas)
- Largeur du site : moyenne (Configuration > Apparence Générale > Général > largeur du site)
- Fixer la largeur maximum à 1320px activé (Configuration > Apparence Générale > Général > largeur du site)

Pour information :

1) Nous avons essayé de jouer sur les paramètres suivants :
- Largeur du site : moyenne ou large
- Fixer la largeur maximum à 1320px : activé ou désactivé
Dans tous les 4 cas, nous ne sommes pas arrivés à réduire la largeur minimum de 2 marges (en valeur absolue).

2) Si on supprime le menu vertical, les marges gauche et droite ne sont plus affichées. Mais dans notre cas, nous souhaitons garder le menu vertical.

Ce que nous souhaitons :
Nous souhaitons réduire la largeur des marges gauche et droite avec la configuration indiquée précédemment (par exemple que les 2 marges occupent 6 % de l’écran soit 3% pour chaque marge)

Merci d’avance à la personne qui va se pencher sur notre demande d’aide et nous fournir un code CSS.

Cordialement
Francis

Bonjour =)

Si vous souhaitez réduire les marges à gauche du contenu de votre page et à droite du menu vertical, il faudra désactiver l'option qui empêche le site de dépasser les 1320px. Si votre écran est plus large, il sera impossible de réduire les marges si cette option est activée car le site ne pourra pas prendre plus de place et donc les marges ne pourront pas être réduite.

Une fois que l'option est désactivée, dites-le moi et je regarderai pour augmenter l'espace que prend le contenu et le menu vertical à 94 %.

Bonjour "overflo",

Juste pour dire que je viens de désactiver l'option qui empêche le site de dépasser les 1320px.
Merci de votre aide.

Cordialement.
Francis

Hello,

Vous pouvez essayer ce code, qui est à ajouter dans "Configuration -> Apparence -> Experts -> CSS".

@media (min-width: 1600px) {

#wrapper.container {
max-width: calc(94vw - var(--grid-gutter-width));
}

}

@media (min-width: 1200px) {

#wrapper.container {
max-width: calc(94vw - var(--grid-gutter-width));
}

}

@media (min-width: 992px) {

#wrapper.container {
max-width: calc(94vw - var(--grid-gutter-width));
}

}

Avec ça le site (zone de contenu + menu vertical) devrait prendre 94 % de la largeur disponible sur l'écran. Il ne faudra pas changer les options qui modifie la largeur du site parce que le code pourrait ne plus fonctionner.

Dites-moi si c'est bon pour vous avec ce code. :)

Bonjour "overflo",

Je viens de rajouter le code CSS dans ma configuration et ce code correspond parfaitement à ma demande.

Je me suis même permis de réduire encore les 2 marges en passant à 98%.
Pour cela, j'ai remplacé 3 fois "94vw" par "98vw" dans le code CSS et l'affichage
a été modifié en conséquence.

Je vous remercie pour cette aide, bien utile pour moi. :)

Cordialement.
Francis

Super ! Ravi d'avoir pu aider. :)