Mobile homepage collection list layout issue

gwilliams
Pathfinder
120 0 32

Hello

On my homepage, I have a collections list which highlights 3. On mobile view, the layout for this looks odd. I would like 1 collection highlight to be shown 1 after the other so the user scan scroll down as at the moment 2 are featured on 1 line and the 3rd includes a lot of white space on the right hand side (see screenshot).

Homepage URL is https://display-sign.co.uk/

mobile-issue.png

0 Likes
HardikDavra
Shopify Partner
2327 367 999

@gwilliams 
Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

@media only screen and (max-width: 600px) {
#shopify-section-1615371150eaeda973 .collection-grid .grid  .grid__item {
width: 100%;
}
}
PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
Pallavi
Shopify Expert
2235 369 484

Hello There,

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

@media screen and (max-width: 749px){
div#shopify-section-1615371150eaeda973 li.grid__item {
width: 100%;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes