[Résolu] Diviser l'écran en 3 divs plein écran

(reprise du message précédent)

- Une proposition, dans ton devtools tu as deja ton nav en block ... tu peux essayer d'enlever le nav de cette definition css ou bien plus simple, n utilises pas nav mais div. comme cela tu pourras etre en flex.
- essaye ton code sur un fichier hors WP et une fois que ca marche, tu essaies de le mettre dans ton WP
- dans ton 3eme CSS, tu mets width de img à 100 % donc chaque image va pendre 100 % de la largeur de l ecran ! essaies avec 33 % plutot.
...

alain_47 a écrit :
- Une proposition, dans ton devtools tu as deja ton nav en block ... tu peux essayer d'enlever le nav de cette definition css ou bien plus simple, n utilises pas nav mais div. comme cela tu pourras etre en flex.
- essaye ton code sur un fichier hors WP et une fois que ca marche, tu essaies de le mettre dans ton WP
- dans ton 3eme CSS, tu mets width de img à 100 % donc chaque image va pendre 100 % de la largeur de l ecran ! essaies avec 33 % plutot.
...

en fait c'est dans mon thème parent genesis que ça met la nav en block mais avec !important j'ai réussi à contrer cet ordre.
Maintenant que c'est en flex il faut bien laisser la width à 100% comme le disent les autres, ça fonctionne:


Par contre ça passe pas automatiquement en horizontal sur mobile... Mais tant pis je vais chercher ce qu'il faut faire pour l'adapter aux mobiles, c'est déjà pas mal pour l'instant !

alain_47 a écrit :
- Une proposition, dans ton devtools tu as deja ton nav en block ... tu peux essayer d'enlever le nav de cette definition css ou bien plus simple, n utilises pas nav mais div. comme cela tu pourras etre en flex.
- essaye ton code sur un fichier hors WP et une fois que ca marche, tu essaies de le mettre dans ton WP
- dans ton 3eme CSS, tu mets width de img à 100 % donc chaque image va pendre 100 % de la largeur de l ecran ! essaies avec 33 % plutot.
...

en fait c'est dans mon thème parent genesis que ça met la nav en block mais avec !important j'ai réussi à contrer ça.
Du coup en flex, faut bien rester à width: 100% comme disent les autres, ça fonctionne:

Par contre ça passe pas automatiquement en alignement vertical sur mobile mais bon je vais me renseigner comment faire

Isaabelle a écrit :
Alleluia ça y est ça marche !!! Merci à tous !

j'abuse peut être un peu, je pourrais chercher comment faire toute seule mais du coup comment on fait pour que les 3 images se mettent en vertical sur mobile?

non, tu n'abuses pas,

il y a 2 options possible ,

1) un mediaquerie pour enlever le comportement flex : exemple : https://codepen.io/gc-nomade/pen/vYOjdbb

2) un min-width sur les liens et flex-wrap:wrap sur le parent (passage sur 2 puis 3 lignes) : https://codepen.io/gc-nomade/pen/gOpzvyN

Pour ne pas utilisé !important, peut-être peut tu donner un id à ton nav <nav id="monNavFlex"> , cela devrait suffire a éviter le display:block imposé par défaut.
Modifié par gcyrillus (16 Mar 2020 - 15:41)

gcyrillus a écrit :


non, tu n'abuses pas,

il y a 2 options possible ,

1) un mediaquerie pour enlever le comportement flex : exemple : https://codepen.io/gc-nomade/pen/vYOjdbb

2) un min-width sur les liens et flex-wrap:wrap sur le parent (passage sur 2 puis 3 lignes) : https://codepen.io/gc-nomade/pen/gOpzvyN

Pour ne pas utilisé !important, peut-être peut tu donner un id à ton nav &lt;nav id="monNavFlex"&gt; , cela devrait suffire a éviter le display:block imposé par défaut.

Merci beaucoup pour tes conseils, je m'empresse de les appliquer