How to make 6 columns in a single row in multicolumn that stays that way regardless of resizing?

Store Design
, , ,

Topic summary

A user is experiencing layout issues with a multicolumn section displaying 6 columns in a single row. While the layout appears correctly on desktop full-screen, resizing the browser or viewing on mobile/tablet causes the columns to break into multiple rows (4 columns on top, 2 on bottom).

Attempted Solutions:

  • User modified the multicolumn mobile code in sections/multicolumn.liquid to add columns 3-6 to mobile view
  • Checked section settings for mobile slider option without success

Resolution Provided:
A working CSS solution was shared that forces 6 columns to remain in a single row on mobile devices:

  • Add custom CSS to theme.liquid file above the </head> tag
  • The code uses a media query targeting screens under 768px width
  • Sets column width to calc(100% / 6.4) for the multicolumn list items

Status: Issue appears resolved. Multiple community members offered assistance, with one providing collaborative code access and another delivering the final CSS fix with step-by-step implementation instructions including screenshots.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

  • so, im trying to make a multicolumn with 6 columns in 1 horizontal line, and I successfully did that. That was in desktop full screen mode. However, when I resize my screen and/or go to mobile/tablet version, occasionally at certain resizes the singular row of 6 columns gets resized to become 2 rows, increasing in height. The top row is now 4 columns, while the bottom row is 2 columns, with each bottom column worth 2 top columns of space.

    I only edited the multicolumn mobile code in sections/multicolumn.liquid by adding an additional 3rd to 6th column to mobile view.

    i tried searching the community for existing fixes but don’t seem to find any. could anyone help me? really appreciate it ..

2

Hey @digisfx could you please share your Store URL and password as well in order to fix this issue.
Thanks

3

@digisfx Hey, thanks for posting here. can you please share the link to inspect it, thanks.

4

Hi @TheScriptFlow thanks alot for reaching out. will dm you thanks

5

hi @ProtoMan44 for sure. it is:

thanks again for your time..

basically, the multicolumn rows with images looks as intended on desktop full view but when resizing to a smaller view is where my issue begins. hope this helps

6

@digisfx i think you need to make slider on mobile, re check the section setting.

7

@ProtoMan44 I rechecked it, nothing changes. thanks

8

@digisfx can you please share the collaborated code with me I want to try to review this issue though the admin side.

1 Like
9

@ProtoMan44 thanks alot .. it is 9748

10

@digisfx sent

11

hey @ProtoMan44 just given access. thanks for your time

12

Hi @digisfx

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
@media screen and (max-width: 768px){

.multicolumn slider-component.slider-mobile-gutter ul.multicolumn-list > li {
width: calc(100% / 6.4) !important;

}
}
{% endstyle %}

DaisyVo_0-1738417329527.png
DaisyVo_0-1738417329527.png354Ă—477 26.2 KB

1 Like
13

@digisfx please check it now

ProtoMan44_0-1738419079548.png
ProtoMan44_0-1738419079548.png550Ă—367 19.2 KB

please mark my comment as solution thanks

1 Like
14

@DaisyVo hey thank you so much!! i really appreciate your time and effort in helping me out :slightly_smiling_face: