How to make featured collections on Home Page visible on Mobile Site?

[sundayflea]

Hello,

My shop is: https://36-old-streets.myshopify.com/

pass: 36streets

My featured collections on the Home page of the mobile site is showing the images to be very small and the titles to be vertical. The way it looks on desktop is perfect but on mobile is not ideal. Is there a way to fix it so that the images stack on the mobile? Like a 2-2-1 or a 3-2 set up? Thank you ahead of time!!

[DeepVyas]

Did you check your theme settings to display images in the format as needed on mobile.

[sundayflea]

@DeepVyas Yes, I've tried that. It was from a custom code that made it the way it looks on mobile. I'm looking for a way to fix it on the mobile site only. Thanks

[PageFly-Victor]

Hi @Sundayflea,

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css.

Step 3: Paste the below code at bottom of the file -> Save

@media(max-width:767px)
.collection-grid ul.grid.grid--uniform{
 display: grid !important;
 grid-template-columns: 1fr 1fr;
}
.collection-grid ul.grid.grid--uniform li{
 padding: 10px !important;
 min-width: 100%!important;
}
}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

[sundayflea]

@PageFly-Victor I added the code but it changed both my desktop and my mobile page. It also did not stack it as expected. It just increased the size of the images and does not stack/ layer like the screenshot you have attached. Thanks!

[PageFly-Victor]

you can add it again and I will check now
or you can add on the preview theme