Réduire la largeur d'un article

[lomart]

Re : Réduire la largeur d'un article

Content d'avoir rendu service. Attention, cette solution ne fonctionne que pour span8 et offset2.
Pour la rendre plus générale, il faudrait mettre

@media (max-width: 767px) {
.row-fluid [class*="span"] {width:100%}
.row-fluid [class*="offset"]:first-child {margin-left:0;}
}

Il ne reste plus qu'a passer le post comme réglé

[okland]

Re : Réduire la largeur d'un article

Super tout fonctionne
Encore merci de t'être intéressé à mon cas

[lomart]

Re : Réduire la largeur d'un article

Bonjour,

Je ne devais pas être réveillé hier soir

Essayer ce code
@media (max-width: 767px) {
.row-fluid .span8 {width:100%}
.row-fluid .offset2:first-child {margin-left:0;}
}

Je viens de le simuler sur votre site, il fonctionne

[okland]

Re : Réduire la largeur d'un article

Bonjour,
la 2ème solution ne donne rien et je sais pas mettre en place la 1ère

[lomart]

Re : Réduire la largeur d'un article

En effet, le template ne prend que partiellement en charge le responsive bootstrap

Il faut ajouter la feuille CSS :
/media/jui/css/bootstrap-responsive.min.css

OU

il faut ajouter à la fin de template.css
@media screen and (max-width: 767px) {
.span8:100%;
.offset2:margin-left:0;
}

[okland]

Re : Réduire la largeur d'un article

http://imprimeriedupetitcloitre.fr/christophe/

C'est un site où je fais des essais !

[lomart]

Re : Réduire la largeur d'un article

même avec un vrai mobile cela ne marche pas

Dans ce cas tu n'utilises pas bootstrap ou d'autres règles cachent les premières

Peut-on avoir une URL pour voir le souci ?

[okland]

Re : Réduire la largeur d'un article

Bonjour,
même avec un vrai mobile cela ne marche pas

[jisse03]

Re : Réduire la largeur d'un article

Bonjour,

Pourtant quand je regare dans l'emulateuer

http://quirktools.com/screenfly

cela ne marche pas la colonne n'est pas à 100%
Une erreur de ma part ?

Un émulateur n'est que ce qu'il prétend, un émulateur, et qui la plupart du temps ne possède pas 100% des caractéritiques de ce qu'il émule...

Testes ou fais tester avec de vraies tablettes et smartphones, tant sous Android que sous iOS.

[okland]

Re : Réduire la largeur d'un article

La class "hidden-phone" mais cela supprime l'article

[okland]

Re : Réduire la largeur d'un article

Pourtant quand je regare dans l'emulateuer

http://quirktools.com/screenfly

cela ne marche pas la colonne n'est pas à 100%
Une erreur de ma part ?

[lomart]

Re : Réduire la largeur d'un article

Bonjour,

ce que je voudrai c'est faire disparaître la class="span8 offset2" pour la lecture sur mobile

C'est ce qui est fait puisque par les mediaquerie, span8 a une largeur de 100% et l'offset2 une margin de 0
Il sont toujours là, mais n'ont aucune incidence: le bloc occupe toute la largeur

[okland]

Re : Réduire la largeur d'un article

Bonjour,
mon code

<div class="row-fluid">
<div class="span8 offset2">xxxxxxxxxx</div>
</div>

Cela marche très bien sur mon micro,
par contre ce que je voudrai c'est faire disparaître la class="span8 offset2" pour la lecture sur mobile

[okland]

Re : Réduire la largeur d'un article

Très intéressant,
je met en pratique ! et je te tiens au courant

[lomart]

Re : Réduire la largeur d'un article

mon template est bien basé sur Boostrap quentend tu par classe span

Toutes les explications sont là:

http://getbootstrap.com/2.3.2/scaffolding.html

ou en résumé pour 2 colonnes égales
<div class="row-fluid">
<div class="span6">contenu colonne 1</div>
<div class="span6">contenu colonne 2</div>
</div>