How can I make my 3-column section in Shopify responsive for mobile?

Shopify Discussion
1

Hi,

I have created a 3 column section in Shopify that looks great on desktop but when it goes to mobile it is still 3 columns but I only want it to be one column. Below is the code.


## {{ section.settings.title | escape }}

  

    {% if section.settings.heading_text != blank %}
      ## {{ section.settings.heading_text | escape }}
    {% endif %}

    
          

     
{{ block.settings.paragraph_text }}

            {%- if section.blocks.size > 0 -%}
            
  
    
    {%- for block in section.blocks -%}
      - {%- if block.settings.link != blank -%}
          
          {%- endif -%}

            {%- if block.settings.image != blank -%}
              {{ block.settings.image | img_url: '100x100', scale: 2 | img_tag: block.settings.image.alt }}
            {%- else -%}
              {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
            {%- endif -%}
               {% if block.settings.text %}
                  #### {{block.settings.title}}
                

  {{ block.settings.text }}

            {%- endif -%}

          {%- if block.settings.link != blank -%}
          
          {%- endif -%}
      
    {%- endfor -%}
  

{%- endif -%}

{% schema %}
{
    "name": "Logo List",
    "max_blocks": 6,
    "settings": [
        {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Logo List"
        }
    ],
    "blocks": [
        {
            "type": "logo_image",
            "name": "Logo",
            "settings": [
                {
                    "type": "image_picker",
                    "id": "image",
                    "label": "Logo image"
                },
                {
                    "type": "text",
                    "id": "title",
                    "label": "Heading",
                    "default": "Section Heading"
                },
                {
                    "type": "richtext",
                    "id": "text",
                    "label": "Description",
                    "default": "

Add your description here

"
                }
            ]
        }
    ],
    "presets": [
        {
           "name": "Logo list",
           "category": "Image",
           "blocks": [
                {
                    "type": "logo_image"
                },
                {
                    "type": "logo_image"
                },
                {
                    "type": "logo_image"
                },
                {
                    "type": "logo_image"
                }
           ] 
        }
    ]
}

{% endschema %}

Can anyone please help me with this?

2

Use Boostrap or Flex to align the items and make them responsive. Also use @media on elements to make them have different attributes at a certain pixel height or width.

1 Like
3

how do i use these? sorry new to coding :slightly_smiling_face:

4

I am sure this will help you: https://youtu.be/u044iM9xsWU

5

nope :disappointed_face:

6

My problem lies with needing the section to have dynamic content. Most of the solutions I have found have been for when you add the content directly into the code.

7

Can you PM me your Discord so I can help you with the code.

8

All good I have finally got it :grinning_face_with_smiling_eyes: