Même format homepage desktop/mobile

Français

Topic summary

Problème: sur le thème Dawn, l’image principale de la homepage s’affiche correctement sur desktop mais est fortement recadrée sur mobile; l’auteur souhaite limiter ce recadrage ou utiliser une image mobile dédiée. Une capture est jointe.

Proposition de solution: ajouter un style CSS dans theme.liquid (Online Store > Edit Code), juste avant la balise , pour les écrans ≤ 767 px: cibler .banner img avec object-fit: fill !important. Une capture “résultat” illustre un affichage mobile plus rempli.

Contexte technique: le media query (max-width: 767px) applique un style spécifique au mobile; object-fit contrôle la façon dont l’image s’ajuste au conteneur (fill remplit, mais peut déformer l’image).

État: pas de confirmation de l’auteur quant à l’efficacité; l’option d’une image mobile dédiée n’a pas été traitée. Discussion potentiellement ouverte.

Summarized with AI on December 10. AI used: gpt-5.
1

Bonjour,

Sur ma homepage, l’image principale s’affiche correctement sur ordinateur, mais la version mobile est très recadrée et ne ressemble plus du tout à la mise en page desktop - capture en pièce jointe.

Je voudrais que l’image apparaisse de la même manière (ou au moins plus proche) sur mobile. Comment puis-je :

  • soit empêcher le recadrage trop important,

  • soit utiliser une image dédiée pour mobile dans la section ?

Je suis sur le thème Dawn.
Merci beaucoup pour votre aide !

image
image1920×949 240 KB

2 Likes
2

Hey @Xav2406

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (max-width: 767px) {
.banner img {
    object-fit: fill !important;
}
}
</style>

RESULT:

image
image350×756 60.6 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed