css Mise en forme d'une page d'accueil avec Flexbox

[HenriK]

Bonjour,

J'avance petit à petit dans la construction de mon site web mais au niveau de la page d'accueil avec tous les blocs je m'y perds et je n'arrive pas à les placer comme je le souhaite. J'avais commencé avec Grid Layout mais franchement j'ai pas tout compris et avec Flexbox c'est mieux mais je vais pas au bout de mon idée.

Je vous ai fait un petit schéma, est-ce que quelqu'un peut m'aiguiller ? C'est la galère j'ai l'impression de perdre mon temps sur des petits détails.

Merci pour votre aide !

 

[L'occitan]

Euh non ce n'est pas responsif du tout !
Ce n'est pas parce que la taille des blocs diminue ou augmente selon que l'on diminue ou augmente la taille de l'écran que c'est responsif

Et bien c'est la définition même du responsif !

GRID Layout est tout à fait responsif puisqu'il adapte la taille de chacun des conteneurs à la résolution de l'écran.
Evidement cela a ses limites et à partir d'un certain point il faut passer par mes break-points.

D'ailleurs de simples blocs <div> sont responsifs, essaye ce code dans un éditeur en ligne et réduit la fenêtre du navigateur et tu verras que le texte ne sort pas du viewport alors qu'il n'y aucune configuration CSS...

<div>
    <div>Notice that the webpage in the example does not look good when you resize the browser window to a very small width. In the next chapter you will learn how to fix that.</div>
    <div>Notice that the webpage in the example does not look good when you resize the browser window to a very small width. In the next chapter you will learn how to fix that.</div>
    <div>Notice that the webpage in the example does not look good when you resize the browser window to a very small width. In the next chapter you will learn how to fix that.</div>
    <div>Notice that the webpage in the example does not look good when you resize the browser window to a very small width. In the next chapter you will learn how to fix that.</div>
</div>

 

[HenriK]

Pour GRID c'est pareil, tu utilises les media queries et tu changes la disposition de tes areas

C'est ce que je venais chercher.
La réponse est arrivé avant la question, il est fort L'occitan !

Une petite question encore, si j'utilise plusieurs mediaqueries pour un même élément est-ce qu'il y a un ordre à respecter dans le fichier CSS ?
Et si dans le premier mediaqueries je ne personnalise pas une propriété cela veut dire qu'elle garde la valeur originale ou bien il faut quand même la réécrire ?

 

[Naruto]

CSS - Media queries, mais comment ça marche ?? | Cocori Web | Communauté
Il y en a qui ont essayé...

 

[Anthony]

Vous pouvez parcourir ce site super intéressant qui recense les meilleurs sites web responsifs, cliquer sur l'un deux et jetez un oeil sur le code source et inspecter les éléments avec votre navigateur ctrl+maj+i c'est très enrichissant !
Media Queries

 

[WWWest]

Le site de Mozilla c'est vraiment une tuerie, dans sa conception, les schémas de couleur, la police choisie. Tout me plait dans ce site, sans parler du fond avec notamment le MDN Webdocs.

 

[HenriK]

Il y en a qui ont essayé...

Merci @Naruto_Z
Mais ce sujet ne répond pas à ma deuxième question: est-ce qu'il faut réécrire toutes les propriétés ? Même celles qui ne changent pas ?

Sachant que j'ai une div avec plus de 12 propriétés et que à un certain break-point je n'ai que le width et le margin qui changent...
Merci ! (désolé je ne suis plus chez moi depuis quelques jours et je ne peux pas tester en direct)

 

[Cascadeur]

C'est clairement plus simple en essayant c'est sûr.
Non il n'est pas nécessaire de réécrire tout le code CSS, seulement celui qui change avec le break-point. Pour l'ordre il faut juste placer le code CSS concerné par les media queries après le code d'origine, c'est tout.

 

[HenriK]

Salut, merci. J'étais sans mon ordinateur depuis le début de l'année, la carte mère a cramé apparemment.
Je pianote un peu sur celui de ma fille en attendant de le réparer ou de le changer.