Shopify themes, liquid, logos, and UX
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 <div class="wrapper"> and a <div class="row"> in which there are two <div class="col">, 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 %}
@LouisDublois Please share the store URL.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025