css Site responsif: changer le layout avec media queries

LaPomme

Membre
Hello !!

J'ai vu quelques discussions à ce sujet mais je n'y ai pas trouvé la réponse à mon problème.
j'ai ce code dans la configuration écran PC
HTML
<div class="content-max">
    <div class="section-left">
        <p>
            mon contenu - plusieurs lignes de texte
        </p>
    </div>
    <div class="section-right">
        <p>
            mon contenu - plusieurs lignes de texte
        </p>
    </div>
</div>

Lorsque l'écran passe sous les 650px je voudrais ne plus afficher section-left et section-right mais une div reprenant un résumé des 2 textes.
HTML
<div class="content-max">
    <div class="section-resume">
        <p>
            mon contenu résumé
        </p>
    </div>
</div>

Donc pour supprimer les 2 <div> sections left et right, je sais faire
CSS
@media (max-width: 650px) {
    .section-left, .section-right {
        display: none;
    }
}

Mais maintenant comment afficher la <div> section-resume à la place ??
Merci pour votre aide !
 
Solution
Hello,

Pourquoi ne pas simplement utiliser des display: none; en mettant tous les contenus dans la balise content-max ?
HTML
<div class="content-max">
    <div class="section-left">
        <p>
            mon contenu - plusieurs lignes de texte
        </p>
    </div>
    <div class="section-right">
        <p>
            mon contenu - plusieurs lignes de texte
        </p>
    </div>
    <div class="section-resume">
        <p>
            mon contenu résumé
        </p>
    </div>
</div>
CSS
@media (max-width: 650px) { /* en dessous de 650px section-left/right ne s'affichent pas */
    .section-left, .section-right {
        display: none;
    }
}

@media (min-width: 650px) { /* au...

Rockets__

Membre
Salut La Pomme, alors là c'est une belle colle que tu poses !
Et je ne suis pas certain que cela soit possible uniquement en HTML/CSS.

Sinon un truc tiré par les cheveux :
tu positionnes en relatif ton section-resume hors du viewport et tu le replaces correctement quand viewport < 650px
Faudrait essayer mais pourquoi pas.
 

Hamza

Membre
Hello,

Pourquoi ne pas simplement utiliser des display: none; en mettant tous les contenus dans la balise content-max ?
HTML
<div class="content-max">
    <div class="section-left">
        <p>
            mon contenu - plusieurs lignes de texte
        </p>
    </div>
    <div class="section-right">
        <p>
            mon contenu - plusieurs lignes de texte
        </p>
    </div>
    <div class="section-resume">
        <p>
            mon contenu résumé
        </p>
    </div>
</div>
CSS
@media (max-width: 650px) { /* en dessous de 650px section-left/right ne s'affichent pas */
    .section-left, .section-right {
        display: none;
    }
}

@media (min-width: 650px) { /* au dessus de 650px section-resume ne s'affiche pas */
    .section-resume {
        display: none;
    }
}
 

LaPomme

Membre
Pourquoi ne pas simplement utiliser des display: none; en mettant tous les contenus dans la balise content-max ?
Excellent, merciii @Hamza !
J'avais réfléchi à plusieurs options mais je n'avais pas pensé à mettre toutes les sections dans la même <div> comme quoi des fois la solution n'est pas si compliqué faut juste y penser.
@Rockets__ bonne idée aussi. merci.
 

Anthony

Membre
Ce n'est pas vraiment fait pour ça même si ça devrait fonctionner, mais si tu poses des break-points sur <body> tu influes sur les propriété de <body> pas sur son contenu qui devra lui aussi être adapté à la résolution de l'écran... Donc ça ne sert pas à grand chose.

Si tu veux faire quelque chose de séparé, du code pour PC et du code pour smartphone alors autant utilisé un sous-domaine (ça te fera double de boulot attention).
  • PC : monsupersite.fr
  • Smartphone : mobile.monsupersite.fr
 

Ces discussions pourraient vous intéresser...

Hello, J'ai créé un formulaire avec Bootstrap mais j'ai un problème de mise en forme. Les <input> prennent chacun leur propre ligne alors que j'aimerais que certains soit côte à côte. Je ne parviens pas du tout à faire ce que je veux et je ne trouve rien dans la documentation...
Bonjour, Je voulais partager avec vous un lien que j'ai découvert récemment : Random Colors - Hex Colors Pour trouver l'inspiration il est juste parfait, les couleurs et leurs nuances sont superbement bien présentées. En cliquant sur le code couleur vous êtes redirigés vers une page...
Hey tout le monde ! Je viens de m'inscrire et me voilà avec ma première question : Comment faire un effet de clic "genre physique" sur un bouton en CSS ? Avec hover j'arrive à faire un petit effet de surélévation mais là c'est le contraire que je voudrais, comme si on appuyait...
Haut