Collection List replicating desktop view on mobile view

[ecommerceguy1]

Hi there,

I am wanting to replicate how the Collection List looks on desktop on mobile view. I want the collection blocks to be side by side rather than underneath each other.

I have also added some code to remove all padding around the collection block, I would like this to be the same on mobile view.

The theme is in draft - https://yjudk64o3hgl2wb5-15756711.shopifypreview.com

Please find images for reference…

Any help would be appreciated.

Thanks

[Made4uo-Ribe]

Hi @ecommerceguy1

It would be squeeze on the mobile screen like this.

if its okay to you, check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (max-width: 589px){
div#shopify-section-template--16018759680087__featured_collections_E6ifmT .grid.grid--no-gutters {
    display: flex;
}
div#shopify-section-template--16018759680087__featured_collections_E6ifmT .page-width {
    padding: 0;
}
div#shopify-section-template--16018759680087__featured_collections_E6ifmT {
    margin: 0;
}
    }

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[ecommerceguy1]

Hi there,

Thanks for this. I have added the code but it does not appear to have changed the layout of Collection Lists in mobile view. Is there something else I need to look at?

Thanks again

[ecommerceguy1]

Hi there.

I wondered if you had anymore assistance for this. It doesn’t seem to working.

Cheers