shopify template – How to make HTML of images responsive on desktop/mobile-ThrowExceptions

Exception or error:
<div class="index-section" data-section-id="{{ section.id }}">

  {% if section.settings.full_width %}<div class="gridlock-fluid"><div class="row">{% endif %}
  <div class="row homepage-section no-fouc">
    {% for block in section.blocks %}
    {% case block.settings.image_width %}
    {% when '25%' %}
    {%- assign image_size = '500x' -%}   
    {%- assign image_width = 'desktop-3 tablet-fourth' -%}
    {% when '33%' %}
    {%- assign image_size = '500x' -%}   
    {%- assign image_width = 'desktop-4 tablet-2' -%}
    {% when '50%' %}
    {%- assign image_size = '800x' -%}   
    {%- assign image_width = 'desktop-6 tablet-3' -%}
    {% when '66%' %}
    {%- assign image_size = '1200x' -%}   
    {%- assign image_width = 'desktop-8 tablet-two-thirds' -%}
    {% when '75%' %}
    {%- assign image_size = '1200x' -%}   
    {%- assign image_width = 'desktop-9 tablet-three-quarter' -%} 
    {% when '100%' %}
    {%- assign image_size = '1920x' -%}
    {%- assign image_width = 'desktop-12 tablet-6' -%}     
    {% endcase %} 

    {%- assign img_url = block.settings.image | img_url: image_size -%}
    <div class="homepage-promo {% if section.settings.full_width and block.settings[image_size] == '100%' %} centered{% endif %} {{ image_width }} mobile-3 promo-{{ block.id }}" {{ block.shopify_attributes }}>
      {% if block.settings.link != blank %}<a href="{{ block.settings.link }}">{% endif %}
        {% if block.settings.image != blank %}
        <img src="{{ img_url }}">
        {% else %}
        <div class="onboard">
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
        {% endif %}
        <div class="caption">
          {% if block.settings.title_text != blank %}
          <h3>{{ block.settings.title_text | escape }}</h3>
          {% endif %}
          {% if block.settings.hidden_text != blank %}
          <p>{{ block.settings.hidden_text | escape }}</p>
          {% endif %}
        </div>
      {% if block.settings.link != blank %}</a>{% endif %}
    </div>

    <style>
      .homepage-promo.promo-{{ block.id }} .caption h3 {
        color: {{ block.settings.promo_color }};
        font-size: {{ section.settings.promo_size }};  
      }
      .homepage-promo.promo-{{ block.id }} .caption p {
        color: {{ block.settings.hidden_color }};  
        font-size: {{ section.settings.hidden_size }};
      }   
      #shopify-section-{{ section.id }} .homepage-promo .promo-inner h3 {
        font-size: {{ section.settings.promo_size }};  
      }

      #shopify-section-{{ section.id }} .homepage-promo .promo-inner p {
        font-size: {{ section.settings.hidden_size }};  
      }      
    </style>

    <style>
      .promo-{{ block.id }} .promo-inner { float: none; }
    </style>

    {% endfor %}
  </div>
  {% if section.settings.full_width %}</div></div>{% endif %}

  {% if section.blocks.size == 0 %}
  {% include 'no-blocks' %}
  {% endif %}  

</div>


<div class="clear"></div>

{% schema %}
{
    "name": "Image Gallery",
    "max_blocks": 6,
    "settings": [
      {
        "type": "checkbox",
        "id": "full_width",
        "label": "Enable full browser width",
        "default": false
      },
{
        "type": "select",
        "id": "promo_size",
        "label": "Promo image title size",
        "options": [
                    {
            "value": "12px",
            "label": "12px"
          },
          {
            "value": "13px",
            "label": "13px"
          },
          {
            "value": "14px",
            "label": "14px"
          },
          {
            "value": "16px",
            "label": "16px"
          },
          {
            "value": "18px",
            "label": "18px"
          },
          {
            "value": "20px",
            "label": "20px"
          },
          {
            "value": "24px",
            "label": "24px"
          },
          {
            "value": "28px",
            "label": "28px"
          },
          {
            "value": "32px",
            "label": "32px"
          },
          {
            "value": "36px",
            "label": "36px"
          }
        ]
      },
      {
        "type": "select",
        "id": "hidden_size",
        "label": "Promo image hover text size",
        "options": [
                    {
            "value": "12px",
            "label": "12px"
          },
          {
            "value": "13px",
            "label": "13px"
          },
          {
            "value": "14px",
            "label": "14px"
          },
          {
            "value": "16px",
            "label": "16px"
          },
          {
            "value": "18px",
            "label": "18px"
          },
          {
            "value": "20px",
            "label": "20px"
          },
          {
            "value": "24px",
            "label": "24px"
          },
          {
            "value": "28px",
            "label": "28px"
          },
          {
            "value": "32px",
            "label": "32px"
          },
          {
            "value": "36px",
            "label": "36px"
          }
        ]
      }
    ],
    "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "select",
          "id": "image_width",
          "label": "Image width",
          "default": "33%",
          "options": [
            {  
               "value":"25%",
               "label":"25%"
            },
            {  
               "value":"33%",
               "label":"33%"
            },
            {  
               "value":"50%",
               "label":"50%"
            },
            {  
               "value":"66%",
               "label":"66%"
            },
            {  
               "value":"75%",
               "label":"75%"
            },
            {  
               "value":"100%",
               "label":"100%"
            }
          ]
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link",
          "info": "Optional"
        },
       {
        "type": "text",
        "id": "title_text",
        "label": "Image title",
        "default": "Our collections"
       },
       {
        "type": "text",
        "id": "hidden_text",
        "label": "Shown on hover",
        "default": "Shop now"
       },
      {
        "type": "color",
        "id": "promo_color",
        "label": "Text color",
        "default": "#ffffff"
      },
      {
        "type": "color",
        "id": "hidden_color",
        "label": "Hover text color",
        "default": "#ffffff"
      }
      ]
    }
  ],
  "presets": [
    {
      "name": "Gallery",
      "category": "Image",
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
    }
  ]
  }
{% endschema %}

This is the image gallery section code of my Shopify store. Currently, it has 4 images and shows 4 columns, 1 row on desktop when the images in the gallery is set to 25%.
I am happy with the size of the images on the desktop, however, when it is viewed on mobile, the images turn into 1 column, 4 rows. How can I make it so it displays 2 columns, 2 rows of the 4 images and having the images smaller when on mobile?

This is how the images look on mobile:
enter image description here

This is how the images look on desktop:
enter image description here

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *