8771 sujets

Développement web côté serveur, CMS

[Résolu] Petite marge header et footer site html CSS sur WordPress

Bonjour excusez moi de vous déranger.
j'ai un petit problème avec mon site html CSS que j'ai importé sur WordPress, il se trouve que lorsque que je le lance en ligne il y a une petite marge au niveau du header et du footer pour la page d'accueil qui n'est pas vraiment gênante mais j'aimerais bien m'en débarrasser

voici le lien de mon site qui est un site de test https://monsiteamoi.website/
la marge se trouve au niveau de la div "wp-class-blocks" et je n'arrive pas à la trouver dans mes fichiers (WordPress a du me l'ajouter dans mes fichiers et j'ai beau la chercher je ne la trouve pas).
Si vous voyez d'autres problèmes n'hésitez pas à me les dire Smiley biggrin


Mais en attendant svp aidez moi Smiley bawling
Modifié par maximeba (05 Mar 2023 - 22:23)
Modérateur
Salut,

Alors premièrement tu as des padding ici :
.wp-site-blocks {
    padding-top: var(--wp--style--root--padding-top);
    padding-bottom: var(--wp--style--root--padding-bottom);
}


et un margin-top ici :
.wp-site-blocks > * + * {
    margin-block-start: 1.5rem;
}


Utilise l'inspecteur de code pour ce genre de debug c'est hyper simple et rapide. Et tu pourra voir que tu as toutes tes balises meta link title etc en double dans la div .wp-site-blocks (c'est pas bien) .

Bonne journée
Alors premièrement tu as des padding ici :
.wp-site-blocks {
    padding-top: var(--wp--style--root--padding-top);
    padding-bottom: var(--wp--style--root--padding-bottom);
}


et un margin-top ici :
.wp-site-blocks > * + * {
    margin-block-start: 1.5rem;
}


Bonjour merci de votre aide il se trouve que je les ai trouvé grâce au Dev Tools mais par contre je n'arrive pas à les trouver dans mon code car les fichiers de mon site sont postés sur hostinger (mon hébergeur)
et lorsque que j'ai importé mon site web en WordPress. De nombreux fichiers PHP ainsi que des dossiers (WP) se sont ajoutés et je n'arrive pas a retrouver la trace même avec le dev Tools qui m'indique juste que le fichiers où vos deux images sont situées dans le fichiers index
mais le problème est qu'il y en a plein des fichiers Index. Smiley bawling

voyez plutot. upload/1678270314-85553-capturedncran2023-03-08110902.png

Je me demandais donc si vous avez obtenu ces images de code via le Dev Tool ou bien par un autre moyen Smiley murf .

Et s'il serait possible de m'aider à les trouver dans tout ces fichiers Smiley ravi

Dans l'espoir d'une réponse rapide de votre part.
Je vous souhaite une très bonne journée .
Modifié par maximeba (08 Mar 2023 - 12:31)
Modérateur
Salut,

Alors déjà ton site ne peut pas tourner comme ca en local vu que c'est du php donc pas possible d'utiliser le dev tool en local a moins de passer par un outil du genre WAMP mais c'est un peu overkill juste pour ça.

Deuxièmement, c'est une mauvais pratique de modifier le CSS directement dans le fichier de wordpress. Je ne sais pas ou il se trouve exactement mais il y a de grande chance pour qu'il se trouve dans un thème et qu'a la moindre mise a jour le fichier revienne comme avant et tu perde ta modification.

Pour modifier du CSS a chaud tu peux directement dans wordpress passer par Apparence/Personnaliser/CSS additionnel et mettre du CSS la dedans qui restera en place. En l'occurrence un truc du genre :
.wp-site-blocks {
    padding-top: 0;
    padding-bottom: 0;
}

et voir si ca suffit.

maximeba a écrit :
Dans l'espoir d'une réponse rapide de votre part.
C'est toi qui as mis 2j à répondre Smiley lol

Je te souhaite une très bonne journée aussi Smiley cligne
Meilleure solution
_laurent a écrit :
Salut,

Alors déjà ton site ne peut pas tourner comme ca en local vu que c'est du php donc pas possible d'utiliser le dev tool en local a moins de passer par un outil du genre WAMP mais c'est un peu overkill juste pour ça.

Deuxièmement, c'est une mauvais pratique de modifier le CSS directement dans le fichier de wordpress. Je ne sais pas ou il se trouve exactement mais il y a de grande chance pour qu'il se trouve dans un thème et qu'a la moindre mise a jour le fichier revienne comme avant et tu perde ta modification.

Pour modifier du CSS a chaud tu peux directement dans wordpress passer par Apparence/Personnaliser/CSS additionnel et mettre du CSS la dedans qui restera en place. En l'occurrence un truc du genre :
.wp-site-blocks {
    padding-top: 0;
    padding-bottom: 0;
}

et voir si ca suffit.

C'est toi qui as mis 2j à répondre Smiley lol

Je te souhaite une très bonne journée aussi Smiley cligne





J'ai en effet utilisé un ccs additionnel et il semble que cela est marché pour les paddings il me reste a changer a margin-border-top mais cela ne devrait pas trop me prendre de temps

Je vous remercie pour votre aide et vous souhaite une bonne journée.

PS: Je n'ai mis qu'une seule journée cette fois ci !3
Modérateur
Rajouter un 
.wp-site-blocks > * + * {
    margin-block-start: 0;
}

devrait faire l'affaire Smiley cligne

Pense également à supprimer cette partie là :
upload/1678398152-42161-capturedancran2023-03-0922415.png
Elle n'a rien a faire ici.

Et reviens ici si ça coince encore !

Bonne continuation Smiley biggrin
Prévenir un modérateur
Répondre au sujet
Aller à