annuler
Affichage des résultats de 
Rechercher plutôt 
Vouliez-vous dire : 

Adapter au format mobile des images ajouté dans le code

ThomasHg8866
Voyageur
34 2 0

Bonjour, 

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

Capture d’écran 2021-06-29 à 10.02.46.png

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%;}}
}

 

0 J'aime