Icons in mobile view

Solved
houssamalissa
Pathfinder
139 0 40

This section on my website looks fine in desktop:

houssamalissa_1-1632223468503.png

 

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

houssamalissa_0-1632223446962.png

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 🙂

 

Site URL: https://optyma.myshopify.com/
Password: sheert/
Theme: Motion
Accepted Solution (1)

Accepted Solutions
diego_ezfy
Shopify Partner
2755 517 697

This is an 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

View solution in original post

Replies 4 (4)
oscprofessional
Shopify Partner
11650 1818 2325


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

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
houssamalissa
Pathfinder
139 0 40

Hi @oscprofessional , it's in my signature

Site URL: https://optyma.myshopify.com/
Password: sheert/
Theme: Motion
diego_ezfy
Shopify Partner
2755 517 697

This is an 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
Pathfinder
139 0 40

That worked! Thank you!

Site URL: https://optyma.myshopify.com/
Password: sheert/
Theme: Motion