FROM CACHE - fr_header

Comment insérer une version mobile sur des photos dans le code

cooknrun
Visiteur
2 0 0

Bonjour à tous, 😊

 

J'ai inséré du code en HTML sur la page d'accueil pour mettre des images, voici ce que ca donne en version desktop et mobile : 

J'aimerais pouvoir avoir des images plus grandes en version mobile car elles sont minuscules. Comment faire pour la version mobile ? 

Desktop : 

Capture d’écran 2023-02-01 à 12.15.53.png

Mobile : 

Capture d’écran 2023-02-01 à 12.12.53.png

 

 

 

 

 

 

 

 

 

 

 

 

Voici mon code : 

<div style="display : flex; flex-direction:row; ">

<div>
<img style="width: 40%;" src="image">
</div>

<div>
<img style="width: 40%;" src="image">
</div>

<div>
<img style="width: 40%;" src="image">
</div>

<div>
<img style="width: 40%;" image">
</div>
</div>

 

PS : je sais que ce n'est pas la jolie manière d'insérer des icônes avec textes mais j'ai trouvé que cette solution) 

 

Merci d'avance, bonne journée à tous 

Emma 

@cooknrun 

4 RÉPONSES 4

CGOFF
Nouveau membre
10 0 0

Bonjour,

Quand tu mets une photo dans diaporama tu dois choisir une photo pour ordi et une pour mobile.

Tu devrais aller dans le code source de diaporama pour voir les codes que Shopify utilise et les adapter sur tes autres pages.

CGOFF
Nouveau membre
10 0 0

le code source de image. Tu verras les dimensions pour Mobile que tu peux modifier.

 

<div class="content featured-image no-padding with-background {% render 'content-classes', scope: section %}" data-section-id="{{ section.id }}" data-section-type="featured-image">
{% if section.settings.link %}<a href="{{ section.settings.link }}">{% endif %}
{% if section.settings.image != blank %}
<picture>
{% assign dimensions = "180,370,590,740,900,1080,1296,1512,1728,2048,4472" | split: "," %}

{% if section.settings.image_mobile != blank %}
<source media="(max-width: 620px)" srcset=
"{% for dimension in dimensions %}
{{ section.settings.image_mobile | image_url: width: dimension }} {{ dimension }}w,
{% endfor %}"
sizes="100vw"
>
{% endif %}
<source {% if section.settings.image_mobile != blank %}media="(min-width: 621px)"{% endif %} srcset=
"{% for dimension in dimensions %}
{{ section.settings.image | image_url: width: dimension }} {{ dimension }}w,
{% endfor %}"
sizes="100vw"
>
{{ section.settings.image
| image_url:
width: section.settings.image.width
| image_tag:
class: 'expanded',
srcset: nil
}}
</picture>
{% else %}
{% if settings.color_section_bg == settings.color_body_bg %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg with-border' }}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% endif %}
{% if section.settings.link %}</a>{% endif %}
</div>

{% schema %}
{
"name": "t:sections.featured-image.name",
"class": "featured-image-section",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.featured-image.settings.image.label"
},
{
"type": "image_picker",
"id": "image_mobile",
"label": "t:sections.featured-image.settings.image_mobile.label"
},
{
"type": "url",
"id": "link",
"label": "t:sections.featured-image.settings.link.label"
},
{
"type": "header",
"content": "t:sections.settings.header.content"
},
{
"type": "checkbox",
"id": "expanded",
"label": "t:sections.settings.expanded.label",
"default": false
},
{
"type": "checkbox",
"id": "collapsed",
"label": "t:sections.settings.collapsed.label",
"default": false
},
{
"type": "checkbox",
"id": "show_on_desktop",
"label": "t:sections.settings.show_on_desktop.label",
"default": true
},
{
"type": "checkbox",
"id": "show_on_mobile",
"label": "t:sections.settings.show_on_mobile.label",
"default": true
}
],
"presets": [
{
"name": "t:sections.featured-image.presets.name"
}
]
}
{% endschema %}

 

cooknrun
Visiteur
2 0 0

Merci beaucoup je vais regarder 🙂

Simonsron
Shopify Partner
699 87 122

HTML:

<div class="iconBox_new">

<div>
<img src="image">
</div>

<div>
<img src="image">
</div>

<div>
<img src="image">
</div>

<div>
<img src="image">
</div>
</div>

 

CSS:

.iconBox_new{
    display:flex;
    flew-wrap:wrap;
    justify-content:space-between;
}
.iconBox_new>div img{
width:100%;
height:auto;
}
@media only screen and (min-width: 750px){
.iconBox_new>div{
flex:0 0 24%;
}

}
@media only screen and (max-width: 749px){
.iconBox_new>div{
flex:0 0 48%;
}

}

J'espère que ma réponse vous aidera !

banned