[RÉGLÉ] Paramètres du module derniers messages

[Alain_56]

Bonjour,
J'affiche à l'aide du module 5 articles avec le titre et l'image d'introduction. Cette dernière mesure 400 x 400 pixels.
La taille des images est trop importante. Pour les réduire, j'ajoute cette classe

.module-dernier-message {
margin: auto;
width: 50%;
height: 100%;
}

Cela réduit la largeur du module (les titres et les images).
Est-il possible, avec le CSS, de conserver les titres à 100% et réduire seulement les images à 50% ?
Alain

[lefabdu51]

salut, peux tu regarder et renvoyer le code html correspondant à la partie concernant le module?
y a t il une classe spécifique pour la balise img correspondante ?
Quelle est la classe associé au conteneur supérieur ?
si ce n'est pas le cas, il faudra prévoir une substitution et y ajouter une classe dont tu pourras te servir pour cibler les images spécifiquement, ou alors te servir du conteneur supérieur pour cibler la balise img.

[Alain_56]

Bonjour lefabdu51
J'espère qu'avec ces codes tu vas trouver une solution

y a t il une classe spécifique pour la balise img correspondante ? newsflash-image
Quelle est la classe associé au conteneur supérieur ? card-header


class="card-header"

élément {
}
.card-header:first-child {
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}
.card-header {
background-color: rgba(0,0,0,.03);
border-bottom: 1px solid #dfe3e7;
margin-bottom: 0;
padding: .5rem 1rem;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-family: var(--cassiopeia-font-family-headings,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",);
font-weight: var(--cassiopeia-font-weight-headings,700);
}
@media (min-width: 1200px)
.h4, h4 {
font-size: 1.5rem;
}
.h4, h4 {
font-size: calc(1.275rem + .3vw);
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-weight: 500;
line-height: 1.2;
margin-bottom: .5rem;
margin-top: 0;
}
*, ::after, ::before {
box-sizing: border-box;
}

class="card-body"

élément {
}
.card-body {
flex: 1 1 auto;
padding: 1rem;
}
*, ::after, ::before {
box-sizing: border-box;
}

class="newsflash-title"

élément {
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-family: var(--cassiopeia-font-family-headings,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",);
font-weight: var(--cassiopeia-font-weight-headings,700);
}
.h5, h5 {
font-size: 1.25rem;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-weight: 500;
line-height: 1.2;
margin-bottom: .5rem;
margin-top: 0;
}

class="newsflash-image"

img {
height: auto;
max-width: 100%;
}
img, svg {
vertical-align: middle;
}

[bruno28]

Bonjour,
J'affiche à l'aide du module 5 articles avec le titre et l'image d'introduction. Cette dernière mesure 400 x 400 pixels.
La taille des images est trop importante. Pour les réduire, j'ajoute cette classe

.module-dernier-message {
margin: auto;
width: 50%;
height: 100%;
}

Cela réduit la largeur du module (les titres et les images).
Est-il possible, avec le CSS, de conserver les titres à 100% et réduire seulement les images à 50% ?
Alain

Bonsoir Alain_56

Peux-tu donner un lien vers le site

ça sera plus facile pour t'aider

[Alain_56]

Bonjour bruno28

Peux-tu donner un lien vers le site, ça sera plus facile pour t'aider

Le site est en cours de construction sur un serveur virtuel.
J'utilise le template Cassiopeia, si cela peux aider...

[bruno28]

Bonjour Alain

Comme lefabdu51 t'a demandé, donne-nous plutôt le code html de la page

Est-ce que tu veux quelque chose dans ce genre : https://www.kodamina.org/ (module latesnews)

ou : https://www.kodamina.org/nos-programmes (module latesnews aussi)

Bonne journée

[bruno28]

.module-dernier-message {
margin: auto;
width: 50%;
height: 100%;
}

Sinon, si tu ne veux toucher qu'aux images, tu peux utiliser

.module-dernier-message img {
max-width: 100%;
}

Ou plus simplement fournir des images plus petites, par exemple

[Alain_56]

Bonjour bruno28,
Suite à ton dernier post, j'ai appliqué la solution suivante

.module-dernier-message img {
margin-left: 25%;
margin-right: 25%;
max-width: 50%;

le module n'est pas modifié, l'image est réduite et centrée.
merci

[bruno28]

Bonjour Alain

Super, content de t'avoir aidé

Bonne journée