Forum : Transformer ma Page en Responsive

Trop de code dans le sujet, montre plutôt un exemple en ligne.
Pour ta question il faut rajouter des règles CSS, pour adapter certains éléments et surtout avoir cette métadonnée dans la partie en tête.

  <meta name="viewport" content="width=device-width, initial-scale=1" />

popotte

Hello :)

Alors comme a dit Grafikart faut ajouter la meta viewport

Et pour le responsive en gros il faut procéder par breakpoints

@media (max-width: 500px) {
    .container {
        foo: bar;
    }
}

En faisant du plus grand au plus petit (le css se lit de haut en bas, et c'est les règles les plus en bas qui sont prioritaires)

Pour plus de détails: https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061510-utilisez-le-responsive-design-avec-les-media-queries

Sinon pour tes prochains sites, c'est mieux de faire en mobile-first, avec le desktop first tu devra ajouter des breakpoints pour corriger les éléments qui cassent et tu devra adapter tes breakpoints à tes éléments, en mobile first (cad tu fais ton site en format mobile, et ensuite tu adaptes pour les ecrans de + en + grands) le design ne sera jamais cassé alors tu places tes breakpoints où tu veux ^^

Transformer ma Page en Responsive

2 réponses