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 </head> tag and add the following code above </head> 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 </head> it gives me this error

 

[topnewyork]

@Rio_Omnis 

paste the below code before </head>

<style>

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

.multicolumn slider-component.slider-mobile-gutter ul.multicolumn-list > li {

 width: calc(100% / 6.4) !important;

}
}

</style>

[Rio_Omnis]

It ends up looking like this

 

[topnewyork]

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

<style>
 @media screen and (max-width: 768px) {
    .multicolumn-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .multicolumn-list > li {
        flex: 1 1 calc(33.33% - 10px) !important;
        max-width: calc(33.33% - 10px) !important; 
    }
}
</style>

[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

[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

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

[Dan-From-Ryviu · Accepted solution]

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);
}
}