28112 sujets

CSS et mise en forme, CSS3

[Résolu] Responsive : div en dessous d'une autre

Bonjour,

J'ai besoin de conseils pour rendre le contenu d'une page wordpress responsive.

Mon objectif est de faire passer une div sous une autre lorsque le site est visionné sur mobile. Mais je ne m'y connais pas assez en css pour savoir comment m'y prendre.

Voici mon code : 
<div style="display:block; width:100%; height:auto;">
  <div style="float:left; display:block; width:30%; height:auto;"> 
<!--CONTENU TEXTE ET IMAGE--> 
  </div>
  <div style="float:right; display:block; width:70%; height:auto;"> 
    <!--INSERT DE GOOGLE MAP--> 
  </div>
</div>


Je voudrais donc que la map google passe en dessous sur mobile.

Merci d'avance pour votre aide.
Modifié par Annecath (08 Dec 2016 - 16:15)
Bonjour,

Dans l'absolu il vaudrait mieux faire l'inverse : que les div soient naturellement l'une au dessous de l'autre sur petits écrans pour ensuite les disposer de part et d'autre sur écrans plus large. C'est le principe de ce qui s'appelle le "mobile first", je vous laisse chercher les avantages sur le net.

Un exemple de ce que vous cherchez à faire avec cette technique (et avec une solution flexbox) : A layout...

Voici le code (une fois celui-ci compilé) :
<div class="wrap">
  <div></div>
  <div></div>
</div>

body {
  margin: 0;
  background-color: #333;
}
.wrap > * {
  min-height: 50vh;
}
.wrap > :first-child {
  background-color: Tan;
}
.wrap > :last-child {
  background-color: Peru;
}
@media (min-width: 40rem) {
  .wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .wrap > :first-child {
    width: 70%;
  }
  .wrap > :last-child {
    width: 30%;
  }
}

Modifié par Olivier C (08 Dec 2016 - 17:03)
Merci Beaucoup !

Je ne connaissais pas le principe du "mobile first" et j'avoue que je n'y aurais jamais pensé.

Votre solution a parfaitement fonctionné. Il faut seulement que je fasse quelques ajustements au niveau des tailles.

Merci encore pour votre aide.
Modérateur
Ou sinon (parce que je deviens un peu un vieux réac), en beaucoup plus compatible et en desktop-first:


<div class="wrap">
  <div class="truc"></div>
  <div class="truc"></div>
</div>




.wrap > div {
  float: left;
}
.wrap > :first-child {
  width: 30%;
}
.wrap > :last-child {
  width: 70%;
}
@media (max-width: 40em) {
  .wrap > div.truc {
    float: none;
    width: auto;
  }
}
Oui c'est vrai. C'est idiot mais je n'ai jamais aimé les floats, peut être parce que je suis arrivé dans le CSS au moment où le modèle tabulaire faisait son apparition, modèle tellement plus élégant... avant l'arrivé de flexbox et ses possibilités.

La même solution que plus haut en modèle tabulaire (plus compatible que le modèle flexbox mais moins que la solution float) :
@media (min-width: 40em) {
  .wrap {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  .wrap > * {
    display: table-cell;
    table-layout: fixed;
  }
  .wrap > :first-child {
    width: 70%;
  }
}


Le code en ligne : CodePen
Sujet clos
Aller à