Liquid, Javascript, thèmes
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%;}}
}
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 :
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 !
Nass | Shopify
- Ma réponse est-elle utile ? Cliquez sur J'aime pour me le faire savoir!
- Votre question a-t-elle été répondue ? Sélectionnez Accepter comme solution
- Pour en savoir plus, visitez notre Centre d'aide en français ou le Blog Shopify
Shopify soutient les marques et les entrepreneurs les plus innovants au monde. En 2024,...
By SarahF_Shopify Mar 25, 2024Vous êtes plusieurs à vous demander : “Est-ce que je suis conforme à la loi anti-fraude...
By Océanne Mar 21, 2024Chaque jour, des milliards de personnes naviguent sur Internet, font des achats en ...
By Océanne Mar 7, 2024