2 Column Gallery on Mobile Site Only (Instead of 1)

sjgn
Tourist
13 0 3

When I have a gallery section on my homepage enable with 4 photos on a row, it looks fine on desktop. But on mobile, the images are shifted into a 1x1 column/row which doesn't look good.

The 'Gallery' section code looks like this if it helps, and the theme I'm using is Envy:

<div class="row image-bar">
      {% for block in section.blocks %}

        {% case section.blocks.size %}
          {% when 1 %}
            {%- assign column_size = 'col-sm-12 col-md-12 image-bar--single-image image-bar--single-column-mobile' -%}
          {% when 2 %}
            {%- assign column_size = ' col-12 col-sm-6 col-md-6' -%}
          {% when 3 %}
            {%- assign column_size = 'col-sm-12 col-md-4 image-bar--single-column-mobile' -%}
          {% else %}
            {%- assign column_size = 'col-sm-12 col-md-3 image-bar--single-column-mobile' -%}
        {% endcase %}

 

My website is: thebespokesignhouse.com - I've put an example of what currently looks like now vs what I'd like it to look like.

1.jpg2.jpg

 

Thank you

KetanKumar
Shopify Partner
20524 2121 7737

@sjgn 

sorry for that issue please check this code

{% case section.blocks.size %}
          {% when 1 %}
            {%- assign column_size = 'col-sm-12 col-md-12 image-bar--single-image image-bar--single-column-mobile' -%}
          {% when 2 %}
            {%- assign column_size = ' col-6 col-sm-6 col-md-6' -%}
          {% when 3 %}
            {%- assign column_size = 'col-sm-6 col-md-4 image-bar--single-column-mobile' -%}
          {% else %}
            {%- assign column_size = 'col-sm-6 col-md-3 image-bar--single-column-mobile' -%}
        {% endcase %}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes