How to display multiple icons side by side on mobile using the Focal theme?

[TillBa]

Hi all,

I’m currently using the Focal theme on my Shopify store and have added a multi-column view on the home page.

Shop: baumann-weine.myshopify.com
Password: Config1928

On desktop everything fits, but in the mobile view only 2 1/2 icons are displayed (see screenshot 1), the rest of the icons are only visible by swiping to the left.

Unfortunately, when I go to “Stack Items” in the module settings, all icons are displayed individually and large one below the other (see screenshot 2).

However, I want two (if possible three) icons to be displayed next to each other on mobile screens, so that I have only two rows and all icons are directly visible. I guess this can be done by a small change in CSS code. Unfortunately I am not a HTML professional, so I need your help.

Thanks a lot!

[made4Uo]

Hi @TillBa

Not all developers have access to Focal theme. Please share your website to best assist you

[TillBa]

Thanks for the information @made4Uo . Added the website information to the post.

Shop: baumann-weine.myshopify.com
Password: Config1928

[BSS-Commerce]

Hi @TillBa ,

Add the following code to the theme.css file to fix it:

.scroller{
overflow-x: hidden !important;
}
@media screen and (max-width: 740px)
.multi-column--pocket-medium .multi-column__inner--scroller {
    grid-template-columns: 1fr 1fr 1fr !important;
}
.multi-column__inner--scroller {
    grid-auto-flow: row !important;
}

Result:

Hope it works @TillBa !