Hi all,
I have been really struggling to configure the column alignment for Text Columns with Images section in Shopify between full screen desktop and mobile sizes. I would like mobile applications to have the columns stacked (as they currently are), and for desktop applications to have the 3 text columns with images side by side. The 3 text columns are side-by-side only when the web browser size is reduced (I would like it to remain side-by-side when the web browser is full screen).
Below is the code I am using:
{% if section.settings.title != blank %}
#### {{ section.settings.title | escape }}
{% endif %}
{%- assign grid_item_width = 'large--one-third medium--one-third' -%}
{%- assign image_size = '530x' -%}
{% case section.blocks.size %}
{% when 1 %}
{%- assign grid_item_width = 'large--one-half medium--one-half' -%}
{%- assign image_size = '780x' -%}
{% when 2 %}
{%- assign grid_item_width = 'large--one-half medium--one-half' -%}
{%- assign image_size = '780x' -%}
{% when 4 %}
{%- assign grid_item_width = 'large--one-quarter medium--one-half' -%}
{%- assign image_size = '780x' -%}
{% endcase %}
{% for block in section.blocks %}
{% if section.blocks.size == 5 and forloop.index < 3 %}
{%- assign column_width = 'large--one-half medium--one-half' -%}
{% else %}
{%- assign column_width = grid_item_width -%}
{% endif %}
{% if section.blocks.size == 5 and forloop.index == 3 %}
{% endif %}
{% if block.settings.enable_image %}
{% if block.settings.image != blank %}
{% if block.settings.button_label == blank and block.settings.button_link != blank %}
{{ block.settings.image | img_url: image_size | img_tag }}
{% else%}
{{ block.settings.image | img_url: image_size | img_tag }}
{% endif %}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% endif %}
{% if block.settings.title != blank %}
##### {{ block.settings.title | escape }}
{% endif %}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% if block.settings.button_label != blank and block.settings.button_link != blank %}
{{ block.settings.button_label | escape }}
{% endif %}
{% endfor %}
{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
{% schema %}
{
"name": "Text columns with images",
"class": "index-section",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Text columns with images"
},
{
"type": "select",
"id": "homepage_columns_color",
"label": "Background color",
"default": "homepage--white",
"options": [
{ "value": "homepage--white", "label": "White"},
{ "value": "homepage--light", "label": "Light"},
{ "value": "homepage--splash", "label": "Accent"},
{ "value": "homepage--dark", "label": "Dark"}
]
},
{
"type": "select",
"id": "align_text",
"label": "Text alignment",
"default": "text-center",
"options": [
{
"value": "text-left",
"label": "Left"
},
{
"value": "text-center",
"label": "Centered"
}
]
}
],
"blocks": [
{
"type": "text_block",
"name": "Column",
"settings": [
{
"type": "checkbox",
"id": "enable_image",
"label": "Show image",
"default": true
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Add a title or tagline"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "
Share blog posts, products, or promotions with your customers. Use this text to describe products, share details on availability and style, or as a space to display recent reviews or FAQs.
"
},
{
"type": "text",
"id": "button_label",
"label": "Button label",
"info": "Leave blank to link from image"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
}
]
}
],
"presets": [
{
"name": "Text columns custom",
"category": "Text",
"blocks": [
{
"type": "text_block"
},
{
"type": "text_block"
},
{
"type": "text_block"
}
]
}
]
}
{% endschema %}
Below is how I want it to appear when the web page is maximised on a desktop, and stacked on top of eachother when it is in mobile size.
Thank you so much for your help!
Kinori