How can I rearrange website icons in mobile view?

Store Design
1

This section on my website looks fine in desktop:

houssamalissa_1-1632223468503.png
houssamalissa_1-1632223468503.png1415×655 119 KB

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

houssamalissa_0-1632223446962.png
houssamalissa_0-1632223446962.png421×665 50.1 KB

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 :slightly_smiling_face:

2

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

1 Like
3

Hi @oscprofessional , it’s in my signature

4

@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

1 Like
5

That worked! Thank you!