[RÉGLÉ] Syntaxe css pour forcer la réduction largeur contenu d'un module

[FlodAriege]

Bonsoir,

Avec votre aide, petit à petit j'apprends un peu de css par ci par là, et ma question du jour est la suivante :

J'aimerais qu'en dessous de 332 pixels de largeur d'écran, ce qui s'affiche à l'intérieur de mon module bottom (Template JSN Boot) soit contraint sur une ligne (actuellement mes lignes de 4 images passent sur 2 lignes : 3 images sur la 1ère ligne et la 4ème passe en 2nde ligne)

Je pensais écrire ça comme ceci, mais je ne suis vraiment pas du tout sûre de moi... Merci de me corriger :

/* -------- BEGIN MEDIA QUERY -------- */
@media screen and (max-width: 331px) {
#jsn-pos-bottom {
width: 90%;
}
/* -------- END MEDIA QUERY -------- */

Pour la largeur, j'ai déterminé 331 px en utilisant la vue adaptative de Mozilla, mais s'il existe un moyen de le calculer précisément, j'aimerais le connaître.
Mes images font 4 fois 75 pixels + un espace insécable entre chaque soit 300 pixels + la largeur de 3 espaces insécables. Sur mon iPhone 4 (320 px je crois), ça passe sur 2 lignes.

Merci !

PS : mon site est ici : rouchenergies . fr

[PhilJ]

[...] Je pensais écrire ça comme ceci, mais je ne suis vraiment pas du tout sûre de moi... Merci de me corriger :

/* -------- BEGIN MEDIA QUERY -------- */
@media screen and (max-width: 331px) {
#jsn-pos-bottom {
width: 90%;
}
/* -------- END MEDIA QUERY -------- */

[...] Mes images font 4 fois 75 pixels + un espace insécable entre chaque soit 300 pixels + la largeur de 3 espaces insécables. Sur mon iPhone 4 (320 px je crois), ça passe sur 2 lignes.

Non, parce que :
—

1. Le ciblage (= #jsn-pos-bottom) est beaucoup trop général.
2. Les images sont explicitement dimensionnées (= <img width="75" height="49" ...>).
3. Et aussi — « accessoirement » — parce que ton @media n'est pas fermé.

=> Déclarer une nouvelle classe CSS, qui sera commune aux deux paragraphes qui contiennent les groupes de 4 images. Cela permettra de cibler précisément (1°) les paragraphes en question, et surtout (2°) les vignettes qu'ils contiennent.

Par exemple : <p class="vignettes">...<img ...>...<img ...>...<img ...>...<img ...>...</p>.

Le plus sûr est bien entendu de passer en mode CODE HTML (icône <> dans JCE) pour faire cette petite modification.

Puis mettre quelque chose comme ceci dans custom.css de façon à cibler les images en question :
—

@media screen and (max-width: 331px) {

p.vignettes img {

width: 72px;

}

} /* <= Attention : la déclaration @media doit être fermée ! */

Autrement dit : lorsque l'écran fait moins de 332 px, les vignettes doivent se contenter d'une largeur de 72 px (au lieu de leur largeur réelle, qui est de 75 px).

Petit plus pour que ce soit bien régulier, ajouter ceci pour centrer le § :
—

p.vignettes {

text-align: center;

}

Au total donc, cela donnera :
—

@media screen and (max-width: 331px) {

p.vignettes {

text-align: center;

}
p.vignettes img {

width: 72px;

}

}

Il y a sûrement d'autres façons de faire, mais ces directives simples devraient bien marcher (...en théorie !).

Il y a même une solution sans CSS : redimensionner les images en leur donnant une largeur de 72 px .

[FlodAriege]

Re : Syntaxe css pour forcer la réduction largeur contenu d'un module

Merci pour ce cours appliqué de css !
Je mesure les efforts qu'il me reste à fournir avant d'être à peu près indépendante...
Sur ce coup là, je me suis dit qu'il valait quand même mieux appliquer ton tout dernier conseil, et j'ai redimensionné mes vignettes à 72 px.
Merci