Divs qui se chevauchent sans raison

Bonjour,

je développe un site sous wordpress et quand je réduis ma page, les divs du footer qui contiennent les contact se chevauchent au lieu de passer les unes sous les autres. Pourtant je n'ai pas de position absolute... De plus je leur ai mis une class "bloc-footer" en indiquant un min-width: de 271px qui apparait bien valide dans la console et n'est pourtant pas respecté...
Quelqu'un aurait-t-il une idée ?
Voici l'adresse du site :
https://new.cirquelacompagnie.com/
Merci d'avance !

Isabelle

bonsoir
on va dire que je ne suis qu'un méchant, mais je tombe de ma chaise en voyant l'énorme code source de ta page avec autant d'erreurs.
pour une page aussi simple comment peut-on faire aussi compliqué ?
la fumée que tu vois par ta fenêtre, c'est le validateur w3c qui a explosé.
Modifié par drphilgood (17 Mar 2024 - 23:55)

@Olivier C
pas mieux pour pansement :
avec des sélecteurs à rallonge pour éviter des !important et mêmes conclusions et tout comme @drphilgood .
le minmax sur 23em pour garder les adresses mails sur une ligne et une tentative de contenir un peu la taille du logo.

div[data-id="be0c56b"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(23em, 100%), 1fr));
  gap: 1em;
}
div[data-id="be0c56b"] div {
  margin:0;/* se servir du gap sur la grid plutôt */
}
/* comme on a une grid:  interprétation personnel  qui réduit un peu la taille du logo  */
div:is([data-id="5d1ecf5"].elementor-element.elementor-element-5d1ecf5.e-con-full.e-flex.e-con.e-parent) div[data-id="be0c56b"] div[data-id="a368028"] {
  grid-row:1/3;
  height:0;
  min-height:100%;
  max-width:100%;  
}

div:is([data-id="5d1ecf5"].elementor-element.elementor-element-5d1ecf5.e-con-full.e-flex.e-con.e-parent) div[data-id="be0c56b"] .elementor-widget-container img {
  max-height:100%;
  width:auto;
}
/* fin interprétation perso */

Re.

Je fais ici un excursus de la question initiale : je suis allé voir ces fameuses erreurs du validateur W3C. Franchement j'ai vu bien pire : quand on regarde dans le détail on s'aperçoit qu'une mauvaise utilisation des balises <br> provoque la moitié d'entre elles. Rien qu'une correction sur ce point passerait le nombre d'erreurs en dessous de 50.

Le point suivant est avant tout une information et concerne même les meilleurs spécialistes de l'intégration (si si), à savoir, l'emploi de balises autofermantes sur des éléments vides (le slash de fin) :

<balise />

Ce qui déclenche un avertissement du validateur que je traduis ci :

"W3C validator" a écrit :
La barre oblique finale sur les éléments vides n'a aucun effet et interagit mal avec les valeurs d'attributs non citées.

Les fanatiques de la norme XHTML ignoreront cet avertissement avec dédain.

De même, l'avertissement du validateur sur les attributs rôles est un partit pris discutable étant donné que certains lecteurs d'écrans s'en servent encore.

Subsistent enfin quelques erreurs sur les attributs srcset et autres tags styles qui, effectivement, mériteraient une correction.

Au final, je pense que beaucoup de ces erreurs sont dûes au thème lui-même.

Bonjour,

Il faudrait aussi remplacer :

.fond-blanc {
  width:730px;
  margin: auto;
}

par

.fond-blanc {
  width: 100%;
  margin: auto;
}

car le width:730px; empêche le conteneur du texte de présentation du cirque de se réduire en dessous de 730px de large quand l'internaute réduit la largeur de sa fenêtre (ce qui tronque le contenu sans possibilité de le lire). Indispensable de corriger ça d'une manière ou d'une autre !

J'ai testé avec un grand écran en réduisant la largeur de la fenêtre. Je n'ai pas testé sur téléphone ou tablette.

Le reste a l'air de tenir la route (à quelques micro-détails près probablement, mais il y a toujours des micro-détails à régler de toutes façons). Globalement, j'ai trouvé que ce n'était pas si mal.

Amicalement,
Modifié par parsimonhi (18 Mar 2024 - 09:54)

Merci à tous pour vos réponse.
Le code est peut-être sale et hyper chargé, mais c'est comme ça que fonctionne wordpress... Moi le seul code que j'ajoute c'est du css et de temps en temps une fonction javascript. J'utilise elementor (qui n'est pas un thème mais un plugin constructeur de page) et le thème OceanWP.
Olivier C : Tout à fait d'accord sur le systeme de class atroce, on y comprend rien, mais c'est comme ça, ce sont des class que je n'ai pas crées.
Quant à la balise <br>, je ne l'utilise pas, mais j'utilise <br/> quand j'en ai besoin. Donc s'il y a du <br> quelque part ce n'est pas moi qui l'ai mise mais le CMS...
Voilà maintenant je vais tester vos propositions puis je vous fais un retour
Modifié par Isaabelle (19 Mar 2024 - 19:25)

Bonjour,

Isaabelle a écrit :
Quant à la balise <br>, je ne l'utilise pas, mais j'utilise <br/> quand j'en ai besoin. Donc s'il y a du <br> quelque part ce n'est pas moi qui l'ai mise mais le CMS...
Voilà maintenant je vais tester vos propositions puis je vous fais un retour

Justement, dans le monde de 2024, il vaut mieux employer <br> plutôt que <br/>.

De manière générale, on ne met pas de "/" juste avant le ">" dans les balises en HTML5 (pas de "/" donc pour les balises <input>, <img>, <meta>, etc.).

Note : quand on insère dans un document HTML5 des balises d'un autre "langage" comme par exemple du svg, on doit par contre continuer à se conformer aux règles de cet autre langage, et donc, dans le cas du svg, on peut être amené à utiliser des "/" avant les ">" pour des balises telles que <use>, <rect>, <path>, etc.

Amicalement,
Modifié par parsimonhi (20 Mar 2024 - 04:30)