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

[cooknrun]

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 : 

 

Mobile : 

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 

[CGOFF]

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]

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]

Merci beaucoup je vais regarder 🙂

[Simonsron]

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 !