[RÉGLÉ] comment mettre media queries en paysage

[melanie32]

Bonjour,

Voilà j'explique , je travail sur un site et j'utilise le template protostar (joomla 3) qui est responsive et mon probleme que mon site ne passe pas bien au niveau des mobiles et tablettes car j'aimerais déjà avoir exactement le même rendu sur mobiles et tablette que sur l'ordi donc il faudrait que je passe en paysage mais je ne sais pas du tout ou je dois modifier mon code (fichier css ou less) , dans mon fichier css j'ai le code suivant :
@media (min-width: 768px) and (max-width: 979px) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}
.visible-tablet {
display: inherit !important;
}
.hidden-tablet {
display: none !important;
}
}
@media (max-width: 767px) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}
.visible-phone {
display: inherit !important;
}
.hidden-phone {
display: none !important;
}
}

.visible-print {
display: none !important;
}
donc je ne sais pas si c'est là que je dois modifier quelque chose ?
Et mon deuxieme probleme que j'ai créé des positions dans mon fichier index.php en ajouter juste des ligne comme:
<jdoc:include type="modules" name="position-6" style="well" />
sur l'ordi c'est impeccable mais sur mobile et tablette, les modules dépasse de la feuille donc je présume que je dois ajouter un autre code dans les média queries pour que ça soit pris en compte également mais voilà je ne sais pas du tout comment faire et ou je dois le faire
Si quelqu'un pouvait au moins m'orienter sur ces deux problemes !
Je vous remercie par avance

Cordialement
Mélanie

P.S j'espère avoir été suffisamment précise

[lefabdu51]

Re : comment mettre media queries en paysage

@media (min-width: 768px) and (max-width: 979px) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}

ces deux classes sont invérsées:

@media (max-width: 767px) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}

Celles ci aussi .

Pour ajouter l'orientation tu peut créer une requete media comme celle ci :
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

// pour l'orientation paysage

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portait) {
/* Styles */
}

//pour l'orientation portrait

[lefabdu51]

Re : comment mettre media queries en paysage

Et mon deuxieme probleme que j'ai créé des positions dans mon fichier index.php en ajouter juste des ligne comme:
<jdoc:include type="modules" name="position-6" style="well" />

Donnes le marquage html autour. est ce que tes position sont dans un div class="row" ou class="row-fluid' ?

[melanie32]

Re : comment mettre media queries en paysage

Salut,

Merci beaucoup pour tes réponses !! Pour le premier, tu dis inverser, ça veut dire que je doit mettre le visible avant le hidden
et pour me deuxieme les class sont row fluide, et pour le marquage html, je dois le mettre à la place du well (eh oui désolée , je débute un peu ) et comme tu à l'aire tu connaitre beaucoup plus que moi j'ai un souci avec la compatibilité avec les navigateurs sur chrome, safarie et ancienne version IE impeccable mais pour les autre c'est pas top, j'ai fais le test sur un ordi portable sous windows 8 et ce n'est pas tout à fait pareil alors si tu avais une petite piste à me donner, ça serait vraiment le top. Et dans tous les cas merci déjà pour tes réponses !!
Mélanie

[lefabdu51]

Re : comment mettre media queries en paysage

non cela veut dire inverser le contenu de ces selecteurs.

.visible-desktop {
display: none !important;
}
la classe visible sur le bureau (.visible-desktop) avec une propriété aucun affichage (display:none).

quand tu regardes avec firebug autour de ton module, tu as bien une div class="container" ou "container-fluid" qui contient une div class="row" ou div class="row-fluid" ?
Ce marquage est necessaire pour bootstrap et l aspect responsif de ton template.
peut tu me donner le contenu de l'onglet avancé du ou des modules publiés dans cette position?

[melanie32]

Re : comment mettre media queries en paysage

<body class="site <?php echo $option
. ' view-' . $view
. ($layout ? ' layout-' . $layout : ' no-layout')
. ($task ? ' task-' . $task : ' no-task')
. ($itemid ? ' itemid-' . $itemid : '')
. ($params->get('fluidContainer') ? ' fluid' : '');
?>">
<!-- Body -->
<div class="body">
<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
<?php if ($this->countModules('position-1')) : ?>
<nav class="navigation" role="navigation">

<TABLE style="max-width:100%">
<TR>
<TD>
<jdoc:include type="modules" name="position-1" style="well" />

</TD>
<TD>
<jdoc:include type="modules" name="position-2" style="well" />

</TD>
</TR>
</TABLE>
je te met un paragraphe complet de deux positions que je créé côte à côte
merci à toi !!
Eh en faite je te souhaite un joyeux noel avec un jour de retard !!!

[melanie32]

Re : comment mettre media queries en paysage

Et pour le requete média à créer, je dois la placer dans le fichier CSS du template ou dans le less