How can I rearrange website icons in mobile view?

[houssamalissa]

This section on my website looks fine in desktop:

But in mobile view, it arranges the icons into rows of two:

Which takes a while to scroll through! Is there any way to have the mobile view arrange these icons in groups of 3 or 4 in a way that doesn't cause the text to bunch up and overlap?

Thanks 🙂

[oscprofessional]

Hello @houssamalissa ,
Welcome to the Shopify community!
Share your store url with password.

[houssamalissa]

Hi @oscprofessional , it's in my signature

[diego_ezfy · Accepted solution]

@houssamalissa, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

@media (max-width: 640px){

    #shopify-section-162853743403e7833c .grid{
    display: flex !important;
    flex-wrap: wrap !important;
}

#shopify-section-162853743403e7833c .grid .grid__item{
    max-width: 33% !important;
    margin: 0 auto !important;
    width: 100% !important;
    display: inline-block !important;
    margin-bottom: 10px !important;
}

}

Please let me know whether it works.

Kind regards,
Diego

[houssamalissa]

That worked! Thank you!