responsiv landscape et portrait

[Zlika]

Bonsoir,

Pour une version mobile d'un site, j'utilise foundation.

Pour un affichage en portrait j'aimerai un bloc d'infos par ligne et pour un landscape j'aimerai avoir 2 blocs dans la largeur.

Dans un premier temps j'étais parti sur un class="row maClasse" en passant un width à 50% en css sur du landsacape mais je n'arrivais à rien de bon.

Finalement j'ai un row dans lequel j'insère mes 2 blocs en float left doublé d'un float right ! Je trouve pas ça propre dans la démarche.

Et vous comment faites vous ?

Merci

Zlika

[Clair de Lune]

Tu pourrais peut-être mettre les deux blocs en inline-block ?

display: inline-block;

vertical-align: top;

et pour la largeur, affecter 50% (avec margin et padding à 0, sinon un peu moins) pour le landscape et 100% pour le portrait

[SStephane]

Il utilise un système de grid, toucher la css n'est pas une bonne idée.

Pourquoi mets-tu des float à l'intérieur de tes row ? utilise les classes fournies par foundation, ou ne l'utilise pas du tout.

http://foundation.zurb.com/docs/components/grid.html

regarde du coté de source ordering, tu as ce que tu souhaites faire si j'ai bien compris ton truc :

<div class="row">

  <div class="medium-6 medium-push-6 columns">6</div>

  <div class="medium-6 medium-pull-6 columns">6, last</div>

</div>

j'utilise pas du tout ce grid (blueprint ou boostrap), alors je me garde d'aller trop loin dans l'explication pour pas dire de c**.

[Zlika]

Bonsoir,

Merci Clair de Lune j'ai encore des réflexes HTML4 inscrits en routine...

Sinon oui SStephane utiliser un système grid est très structurant, rester dans la démarche est fondamental. C'est pas le source ordering que je recherchais mais plutôt l'ajout d'une classe... j'ai fini par trouvé mon bonheur ici ...Sass y a plus qu'à ! Dans l'attente je vais passer par le inline-block + @media landscape !

Merci @vous 2 de m'avoir mis sur la bonne piste.

Zlika