css responsive help

SP2000
Les bases HTML/CSS

Bonjour je dois faire du responsive en css et je dois réaliser cet exemple :

à partir de 768px et en dessous, les textes qui sont à droite des images UXIA se mettent en dessous

Pouvez-vous m'aidez pour les propriétés que je dois utiliser ?

Merci pour vos réponse

2 réponses

popotte

Hello :)

Tu peux utiliser le flexbox

<div class="container">
    <div class="image"></div>
    <div class="texte"></div>
</div>

.container {
    display: flex;
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

Sinon le mieux c'est d'appliquer une bonne pratique qui est le mobile first (en gros ça évite de faire 15 breakpoints pour réparer des zones où ça casse pck en mobile first le visuel n'est jamais cassé :p)

<div class="container">
    <div class="image"></div>
    <div class="texte"></div>
</div>

.container {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .container {
        flex-direction: row;
    }
}
SP2000
Auteur

Merci pour ta réponse