Discussion :

[bebertweb92]

Bonjour tout le monde,

je suis débutant dans la programmation en langage CSS. Je souhaiterais mettre à la verticale deux blocs pour les versions mobiles qui sont côte à côte horizontalement dans la version normale

Comment dois je faire ? Voici le site internet : http://www.zoomjuridique.fr

voici le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="container">
<div class="split"> <h2 class="text-grey">A propos de <span>Zoom</span>juridique</h2></p>Nous sommes spécialisés depuis plus de 20 ans dans la gestion de l'information juridique et de méta données juridiques.<p></p>
<p>Nous mettons notre&nbsp;expérience et notre&nbsp;savoir-faire à votre service pour vous permettre d’optimiser encore davantage vos missions de gestion et de diffusion de l’information. </p><p><a href="http://www.zoomjuridique.fr/devis-en-ligne/" class="btn btn-grey btn-round uppercase">En savoir +</a></p></div>
 
<div class="split1">
            <p class="el-no-border">
        <span>Vos avantages</span>
      </p>
        <ol>
<li class="check">Augmenter votre notoriété et visibilité </li>
<li class="check">Gagner du temps</li>
<li class="check">Une veille personnalisée</li>
<li class="check">Augmenter votre clientèle</li>
</ol>
</div>
</div>

Voici le CSS concernant les blocs en <div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
div.split {
	box-sizing: border-box;
	width: 70%;
	float: left;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}
 
div.split1 {
	box-sizing: border-box;
	width: 30%;
	float: left;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}

Merci de votre aide

[Invité]

Bonjour,


float:none;
clear:both;
width:100%;

[bebertweb92]

Merci . Cependant dans la version non mobile les blocs doivent rester côte à côte...Ce qui n'est pas le cas quand j'applique ce que vous m'avez donné comme code!!!

[Invité]

Bonjour,

Tu n'as jamais entendu parlé de media queries ?

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
@media screen and (max-width:640px) { /* phone < 640px */
 div.split, div.split1 {
  float:none;
  clear:both;
  width:100%;
 }
}

• Les fondamentaux du Responsive Web Design

[bebertweb92]

Merci de ton aide