RESPONSIVE

Par d-2022, il y a 3 ans

Les bases HTML/CSS
Les bases

Décrivez ici votre problème ou ce que vous cherchez à faire.

"`` @media screen and (max-width: 1200px){ #container{ width: 100%; } #section2{ flex-wrap: wrap; } #portfolio_images article{ width: 48%; } #footer{ flex-direction: column; text-align: center; } .header { width: 100%; height: auto; margin: 50px auto; z-index: 3; } .header ul { margin: 0; padding: 0; list-style: none; overflow: hidden; } .header li a { display: block; padding: 20px 20px; text-decoration: none; } @media screen and (max-width:500px){ header{ width: 100%; height: auto; flex-direction: column; } #main_logo{ margin: 20px auto; } #header_div1{ width: 90%; display: block; margin: 0 auto; } .header li { float: left; } .header li a { padding: 20px 30px; } .header .menu { clear: none; float: right; max-height: none; } .header .menu-icon { display: none; } } .articles{ width: 100%; height: auto; flex-wrap: wrap; } .article_services{ width: 100%; } #portfolio_images article{ width: 100%; } #portfolio_images{ flex-wrap: wrap; } #footer{ flex-direction: column; text-align: center; } .form_flex{ width: 100%; display: block; margin: 0 auto; } #infos{ width: 100%; margin: 0 auto; } .coordonnees, .message{ width: 100%; margin: 0 auto; padding: 0 50px; } #portfolio_images{ padding: 0; } #title{ width: 90%; margin-bottom: 130px; } .menu{ width: 100%;; height: auto; margin: 20px auto; float: none; } ul{ width: 100%;; } .menu ul li{ width: calc(100% / 5); } } ``"

Ce que je veux

Je ne sais pas si j'ai les bonnes pratiques, j'ai essaye de coder en desktop first. si vous avez des suggestions, ce serait cool. Merci

Ce que j'obtiens

Décrivez vos éventuelles erreurs ou ce que vous obtenez à la place de ce que vous attendez :(

1 réponse

popotte, il y a 3 ans

Hello, alors pour commencer tes medias queries doivent être placés tout en bas du CSS

Le CSS fonctionne en cascade, du coup tout ce qui est en bas va écraser les règles

Eeet c'est à peut prèt tout ce qu'il y a à savoir

Niveau bonne pratique le simple fait de faire du desktop firstc'est une mauvaise pratique en fait ^^' Le problème c'est que tu devra placer des media queries à chaque fois que quelque chose casse en réduisant l'écran, alors qu'il n'y a pas de casse en mobile first (alors oui si tu agrandis l'écran avec le CSS mobile le visuel sera étiré, mais il ne sera pas cassé, du coup tu peux mettre une média query où tu veux, et surtout tu aura juste à placer 1 ou 2 media queries, pas plus)