Adapter au format mobile des images ajouté dans le code

[Hg_thomas]

Bonjour, 

Je souhaiterais adapté des images ajouté dans le code pour le format mobile.

 

J'ai essayé avec les media queries mais je n'y parviens pas. Pourriez vous m'aider ?

Le code de mes 4 images ajoutez dans le fichier header.liquid

      <div class="announcement-bar" role="region" aria-label="{{ 'sections.header.announcement_bar_label' | t }}">
        {%- unless section.settings.message_link == blank -%}
          <a href="{{ section.settings.message_link }}" class="announcement-bar__link">
        {%- endunless -%}
                    <img class="logo-bar-HG" src="https://zupimages.net/up/21/04/fqhl.jpg" alt="" style=" height:80%; width:3%; position:absolute; left:5%;"/>
					<img class="logo-bar-BG" src="https://zupimages.net/up/21/18/99xd.png" alt="" style=" height:80%; width:4%; position:absolute; left:10%;"/>
            		<img class="logo-bar-HD" src="https://zupimages.net/up/21/04/dzio.png" alt="" style="height:80%; width:5%; position:absolute; right:4%;"/>
					<img class="logo-bar-BD" src="https://zupimages.net/up/21/04/w0dx.jpg" alt="" style="height:80%; width:5%; position:absolute; right:12%;"/>

            <p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p>

        {%- unless section.settings.message_link == blank -%}
          </a>
        {%- endunless -%}
      </div>

voila ce que j'ai ajouté dans le theme.css

.logo-bar-HG{
  @media only screen and (min-width: 700px) {
    .logo-bar-HG{
      height:25%;
      width:8%;
      position:absolute;
      left:2%;
      top:30%;}}
}

[Nass]

Bonjour @Hg_thomas  !

C’est une question intéressante ! Je serai ravi de répondre à toutes vos questions concernant la configuration de vos images. Afin de mieux comprendre votre situation, j'aurais besoin de quelques informations :

• Quel thème (le nom) utilisez-vous actuellement ?
• Utilisez-vous des applications pour votre boutique, et en avez-vous téléchargé récemment ?
• S’agit-il d’un phénomène que vous avez observé récemment, ou bien cela s’est-il déjà produit auparavant ?

A titre indicatif, nous disposons d’un guide complet vous permettant de vous assurer que vos images soient bien adaptées à votre thème ainsi qu'à votre boutique en ligne. Vous pouvez consulter ce guide juste ici.

Si ces options ne correspondent pas à ce que vous recherchez, n'hésitez pas à me donner plus de détails concernant vos besoins. Je serai heureux d'étudier avec vous d’autres solutions !