Text Columns with Images - Struggling with column alignment on Mobile/Desktop

Solved
Highlighted
New Member
3 0 0

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:

<div class="homepage-columns {{ section.settings.homepage_columns_color }}">
  <div class="wrapper">
    {% if section.settings.title != blank %}
      <h4 class="home__subtitle">{{ section.settings.title | escape }}</h4>
    {% endif %}

    <div class="grid {% unless section.blocks.size == 5 %}grid-uniform{% endunless %}">
      {%- 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 %}<div class="clearfix"></div>{% endif %}
        <div class="grid__item {{ column_width }} {{ section.settings.align_text }}" {{ block.shopify_attributes }}>
          {% if block.settings.enable_image %}
            {% if block.settings.image != blank %}
              {% if block.settings.button_label == blank and block.settings.button_link != blank %}
                <a href="{{ block.settings.button_link }}">
                  <p>
                    {{ block.settings.image | img_url: image_size | img_tag }}
                  </p>
                </a>
                {% else%}
                <p><a href="{{ block.settings.button_link }}">
                  {{ block.settings.image | img_url: image_size | img_tag }}
                  </a>
                </p>
              {% endif %}
            {% else %}
              <p>
                {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
              </p>
            {% endif %}
          {% endif %}
          {% if block.settings.title != blank %}
            <h5 class="uppercase home--uppercase">{{ block.settings.title | escape }}</h5>
          {% endif %}
          {% if block.settings.text != blank %}
            <div class="rte">{{ block.settings.text }}</div>
          {% endif %}
          {% if block.settings.button_label != blank and block.settings.button_link != blank %}
            <a href="{{ block.settings.button_link }}" class="btn btn--clear btn--square uppercase">
              {{ block.settings.button_label | escape }}
            </a>
          {% endif %}
        </div>
      {% endfor %}
    </div>

    {% if section.blocks.size == 0 %}
      {% include 'no-blocks' %}
    {% endif %}
  </div>
</div>

{% 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": "<p>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.</p>"
          },
          {
            "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.

FromKinori_0-1604124201082.png

 

Thank you so much for your help! 

Kinori

0 Likes
Highlighted

Hello.....
Please share your store URL .
So that I will check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
3 0 0

Hi there,

Thank you so much for your reply.

Our website url is www.fromkinori.com and the section I am struggling with is at the bottom of the home page.

 

0 Likes
Highlighted

This is an accepted solution.

Hello
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->timber.scss.liquid

 

@media only screen and (min-width: 769px){
#shopify-section-160351905867c84196 .homepage-columns.homepage--white .grid__item.large--one-third.medium--one-third.text-center {
width: 33.333%;
}
}

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
3 0 0

You are a wizard! It worked! Thank you friend

0 Likes