How can I set mobile view to display 2 columns side by side?

Store Design
1

Hello,

I’m trying to have the multicolumn on mobile to be 2, side by side, instead of 1 stacked on top of each other. Is there a way to do this?

Website: https://affinitybands.com/pages/new-interface

1 Like
2

Symmetry Theme is what we are using

3

Hi @affinitybands

Do you mean like this?

Made4uoRibe_0-1697476198962.png
Made4uoRibe_0-1697476198962.png571×442 76.7 KB

If it is try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 767px){
.flexible-layout.flexible-layout--variable-columns.flexible-layout--columns-6.align-center {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
}
}
  • And Save.
4

that worked. Thanks!

1 Like
5

Hi,

That worked, but when I have more than 6 column items, it reverts back to 1 column. Also, when I add a new column set in Shopify, it doesn’t apply to it. Could you help me fix this?

1 Like
6

The code that I provide is only working on that design when I work out. But when you change it, it would need another codes.

Try this one again.

Same Instruction.

@media only screen and (max-width: 767px){
.flexible-layout, .fixed-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
}
}

And Save.

Result:

Made4uoRibe_0-1698860126384.png
Made4uoRibe_0-1698860126384.png424×484 24.7 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

7

That worked thank you!

1 Like
8

Hello, sorry again. It seems that the code made the whole page 2 columns for mobile. Is there a way to edit the code for columns only?

{% style %} {%- for block in section.blocks -%} #section-id-{{ section.id }} #block-id-{{ block.id }} .text-column__image { max-width: {{ block.settings.image_width }}px; } {%- endfor -%} {% endstyle %}
{% if section.settings.title != blank %}

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

{% endif %}
{% for block in section.blocks %}
{% if block.settings.enable_image %} {% 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 %}

{% endif %}
{% endfor %}

{% schema %}
{
“name”: “Multi-column”,
“class”: “section-multi-column”,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Multi-column”
},
{
“type”: “select”,
“id”: “text_alignment”,
“label”: “Text alignment”,
“options”: [
{
“value”: “left”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
},
{
“value”: “right”,
“label”: “Right”
}
],
“default”: “center”
},
{
“type”: “select”,
“id”: “button_style”,
“label”: “Button style”,
“default”: “primary”,
“options”: [
{
“label”: “Button - primary”,
“value”: “primary”
},
{
“label”: “Button - secondary”,
“value”: “secondary”
},
{
“label”: “Link”,
“value”: “link”
}
]
},
{
“id”: “use_alt_bg”,
“type”: “checkbox”,
“label”: “Use alternate section color”,
“default”: false
}
],
“blocks”: [
{
“type”: “text_block”,
“name”: “Column”,
“settings”: [
{
“id”: “enable_image”,
“type”: “checkbox”,
“label”: “Enable image”,
“default”: true
},
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”
},
{
“type”: “range”,
“id”: “image_width”,
“min”: 60,
“max”: 700,
“step”: 10,
“label”: “Image width”,
“unit”: “px”,
“default”: 700
},
{
“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”
},
{
“type”: “url”,
“id”: “link”,
“label”: “Link”
}
]
}
],
“presets”: [
{
“name”: “Multi-column”,
“settings”: {
},
“blocks”: [
{
“type”: “text_block”
},
{
“type”: “text_block”
},
{
“type”: “text_block”
}
]
}
]
}
{% endschema %}