Making multicolumn on mobile more than 2

[Rio_Omnis]

Hi is there anyone that knows how to make the multicolumn on mobile more than 2?

Here is the store: Pete’s Rubbers

I would really appreciate your help.

[topnewyork]

** @Rio_Omnis **
1/ Shopify admin > Online store > Edit code

2/ Search for “theme.liquid” file
3/ Open the file and search for tag and add the following code above tag:

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 %}

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[Rio_Omnis]

Hi just wondering if I’m doing something wrong? When I place it above it gives me this error

[LizHoang]

Hi @Rio_Omnis

• You can try to follow this step
  Step 1: Go to Edit code
  Step 2: Find file base.css and add this code at the end of the file

@media screen and (max-width: 749px) {
    .grid--2-col-tablet-down .grid__item {
        width: calc(30% - var(--grid-mobile-horizontal-spacing) / 2);
    }
}

Result:

Best,

Liz

[topnewyork]

@Rio_Omnis

paste the below code before

@media screen and (max-width: 768px){ .multicolumn slider-component.slider-mobile-gutter ul.multicolumn-list > li { width: calc(100% / 6.4) !important; } }

[Rio_Omnis]

It ends up looking like this

[Rio_Omnis]

By any chance do you know how to also make the images clickable?

[LizHoang]

You can refer to this link: http://www.w3schools.com/TAGs/att_a_href.asp

[Rio_Omnis]

I can see the code you’re referring to I just don’t know how to apply it to the multicolumn

[topnewyork]

An extremly sorry for this try this code, hope it will working

[Dan-From-Ryviu]

Hi @Rio_Omnis

You can add this code below to Custom CSS of that section in theme customize

@media (max-width: 749px) {
.multicolumn-list__item {
    width: calc(30% - var(--grid-mobile-horizontal-spacing) / 3);
    max-width: calc(40% - var(--grid-mobile-horizontal-spacing) / 3);
}
}

[Ahmad31]

@Rio_Omnis
I can definitely help you make the images clickable! However, I’ll need access to snippet of the section where you’re trying to add this functionality. If you can share the relevant Liquid code, I’ll guide you accordingly.

[Rio_Omnis]

I honestly don’t know a lot about where code is placed but if it was to be somewhere it’s probably on the multicolumn.liquid. I have taken some snapshots let me know if this helps.