[RÉGLÉ] Réduire la largeur d'un article

[okland]

Bonjour à tous c'est ma premiére question sur le forum où je vais régulièrement,
j'ai ajouté une class à un article pour réduire sa largeur ce qui fonctionne très bien,
malheureusement la version mobile aussi (ce qui me donne un article avec 2 à 3 mots par ligne !).
Ma question comment réduire la largeur d'un article sans que la version mobile soit affectée.
Merci d'avance.

[lomart]

Re : Réduire la largeur d'un article

Bonsoir,

Il faut utiliser le responsive pour avoir le texte en colonne sur un écran large et l'un en dessous de l'autre sur mobile.
Si ton template est basé sur Boostrap, une classe span fera l'affaire.
Sinon, il faut jouer avec les médiaqueries

[okland]

Re : Réduire la largeur d'un article

merci pour ta réactivité,
mon template est bien basé sur Boostrap quentend tu par classe span

[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>

[okland]

Re : Réduire la largeur d'un article

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

[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

[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

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 ?

[okland]

Re : Réduire la largeur d'un article

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

[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

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

[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

http://imprimeriedupetitcloitre.fr/christophe/

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

[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

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