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

[digisfx]

• 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 .. 

[TheScriptFlow]

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

[digisfx]

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

[ProtoMan44]

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

[digisfx]

hi @ProtoMan44 for sure. it is:

tonalorbit.com

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

[ProtoMan44]

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

[digisfx]

@ProtoMan44 I rechecked it, nothing changes. thanks

[ProtoMan44]

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

[digisfx]

@ProtoMan44 thanks alot .. it is 9748

[ProtoMan44]

@digisfx sent

[digisfx]

hey @ProtoMan44 just given access. thanks for your time

[ProtoMan44]

@digisfx please check it now 

please mark my comment as solution thanks

[DaisyVo · Accepted solution]

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 </head> tag and add the following code above </head> 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 %}

[digisfx]

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