Petits soucis en responsive

Dev
1

Bonjour,

ça fait extrêmement longtemps que j’ai pas touché de codes CSS et je dois modifier quelque chose en urgence sur le site que je gère (Je gère tout le côté SEO et Webmarketing mais le dev de ce site)

Il y à une image qui prend la largeur de la page et qu’il faut rendre responsive.

J’ai mis une media querry comme suit :

@media (max-width: 768px) {
.nomdetrucs {
max-width : 100%;
height: auto;
} }

Mais mes cours de CSS rudimentaires remontent à pas mal d’années et je me souvient plus trop des bons paramètres pour un bon responsive sur une image.

Il y à aussi device-max-width et d’autres, que je ne sais pas si je dois utiliser.

Si une bonne âme de passage pourrait éclairer ma lanterne, ça serai parfait.

Amour et pailettes.

2

Le mieux c’est de nous reproduire ton code dans un codepen ou équivalent pour voir ce qui ne fonctionne pas. Le max-width à 100% est effectivement une bonne base mais tout ce qu’il y a autour pourrait avoir une influence (ou pas). Théoriquement t’as pas besoin de spécifier une media query, l’image est responsive “toujours” ou ne l’est pas, c’est donc une règle à appliquer à toutes tes images “de base”.

Exemple pris au pif : https://codepen.io/thejediwalking/pen/KCwrt

3

Gratz a bien résumé. Une image rendue responsive n’a besoin que d’un max-width et d’un height en auto, sans rien de plus ou presque. Ta media query est inutile.