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

Store Design
, , ,
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.

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

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

14

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