Re: Two Images (Columns) Side-by-Side on Computer and on Top-of-Each-Other on Mobile

Two Images (Columns) Side-by-Side on Computer and on Top-of-Each-Other on Mobile

LouisDublois
New Member
4 0 0

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 %}
Replies 2 (2)

Guleria
Shopify Partner
3187 620 891

@LouisDublois  Please share the store URL. 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me. - Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
- Support me PayPal
LouisDublois
New Member
4 0 0