Icons in mobile view

Solved
houssamalissa
Pathfinder
136 0 38

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
2313 415 545

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

◦ Slideshow images cutting off or looking bad? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

Replies 4 (4)
oscprofessional
Shopify Partner
9218 1567 1937


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

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
houssamalissa
Pathfinder
136 0 38

Hi @oscprofessional , it's in my signature

Site URL: https://optyma.myshopify.com/
Password: sheert/
Theme: Motion
diego_ezfy
Shopify Partner
2313 415 545

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

◦ Slideshow images cutting off or looking bad? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

houssamalissa
Pathfinder
136 0 38

That worked! Thank you!

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