Collection list arrangement on mobile

Fabian_weldon
Explorer
112 0 25

My collection list is currently side by side on both mobile and desktop.

I would like it to remain like this on desktop but it would look better to be one on top of each other on mobile.

This is how my store appears now:

IMG_3185.PNG

 This is how I would like it to appear:

IMG_3186.PNG

 

 

 

Thank you in advance for any help

0 Likes
JHKCreate
Shopify Partner
2046 331 445

Hi @Fabian_weldon !

This is certainly doable, would you mind sharing your store's URL so we can see how we can help?

Cheers!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
Fabian_weldon
Explorer
112 0 25
0 Likes
Fabian_weldon
Explorer
112 0 25

not necessarily full width like that but just one on top of the other if possible.

thankyou

0 Likes

Dear @Fabian_weldon 

Hope the following suggestions will help you

  • From your Shopify admin, go to Online Store > themes
  • Locate your current theme and then click Actions > Edit code
  • After that in the Assets folder, click to open your theme.scss.liquid file
  •  Go to the very bottom of this file and paste the following code

 

/* Start */
@media only screen and (max-width: 590px) { 
.small--one-half { width: 100% !important; }
.product--wrapper { margin: 20px auto; max-width: 100% !important; max-height: 100% !important; }
}
  .product--image { max-width: 100% !important; }
/* End*/

 

  • Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.

  •  Save and check your theme by refreshing it.

If you still need help you can contact us by using the link or email given at signature. 

 

Best Regards
MS Web Designer| MS Web International | Task4Store
Contact Us: https://www.task4store.com/pages/contact-us OR task4store@mswebdesigner.com
Was our reply helpful? Please Like or Accept solution
0 Likes
Fabian_weldon
Explorer
112 0 25

thanks for the suggestion.

Unfortunately that didn't work. It put the featured collection section in one column but the collection list section remained unchanged:

 

IMG_4293.PNG

0 Likes