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
2299 413 539

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? 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
9171 1561 1925


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

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | 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
2299 413 539

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? 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