Hello,
I am using a custom theme. I have two images side-by-side on a computer device. And I would like these two images to be on top-of-each-other on a mobile device (for now they are side-by-side on mobile).
It is in the home section of my website. I am using a
and a
in which there are two
, one of each image.
I have tried to put :
@media screen and (max-width: 749px) {
.row { flex-direction: column;}
}
, but when I do that I have only one image on mobile device : the first one disappears.
Do you have any idea how I can do what I want to do ?
Thanks in advance,
Louis
The code of the home section is the following:
<style>
#wrap2{
margin-left: 0px;
}
@media screen and (max-width: 749px) {
/* .wrap {
width: 100%;
flex-wrap: wrap;
}
.row {
display:flex;
flex-wrap: wrap;
flex-direction: column;
}
*/
}
</style>
<section class="section section-home">
<div class="wrapper">
<div class="row">
<div class= "col">
<div class="small--one-whole">
<div class="wrap wrap-left">
{% for block in section.blocks %}
{% if forloop.first == true %}
<a href="{{ block.settings.link }}">
<img src="{{ block.settings.image | img_url: '1500x1500' }}" class="img-cover" alt="{{ block.settings.cta_label }}">
</a>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<div class="col">
<div class="small--one-whole">
<div class="wrap wrap-right" id="wrap2">
{% for block in section.blocks %}
{% if forloop.last == true %}
<a href="{{ block.settings.link }}">
<img src="{{ block.settings.image | img_url: '1500x1500' }}" class="img-cover" alt="{{ block.settings.cta_label }}">
</a>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
<div class="text-container text-scroll">
<div class="wrapper">
<div class="text">
{{ section.settings.banner }} {{ section.settings.banner }}
</div>
</div>
</div>
</div>
</section>
{% schema %}
{
"name": {
"fr": "Section principale",
"en": "Main section"
},
"settings": [
{
"id": "banner",
"type": "text",
"label": "Texte",
"default": "Hello world"
}
],
"blocks": [
{
"type": "image",
"name": {
"fr": "Image",
"en": "Image"
},
"settings": [
{
"type": "text",
"id": "cta_label",
"label": {
"fr": "Titre",
"en": "Title"
}
},
{
"type": "color",
"id": "default_color",
"label": "Color default",
"default": "#000"
},
{
"type": "url",
"id": "link",
"label": {
"fr": "Lien",
"en": "Link"
},
"info": {
"fr": "Facultatif",
"en": "Optionnal"
}
},
{
"type": "image_picker",
"id": "image",
"label": {
"fr": "Image",
"en": "Image"
}
}
]
}
]
}
{% endschema %}