Product page: Different layout for mobile and pc

Store Design
, ,
1

Hello!

I’m using the Dawn theme for my skincare e-shop.

In the product pages, I have a short product description, and scrolling down there is extended info for product’s function, use, key ingredients and ingredients list (inci list). For these four info categories, I use the multicolumn section, which looks good in PC but not in Mobile, as scrolling down is kind of tiring, due to the long texts.

I would like to keep the multicolumn section for PC, but I would like to switch to collapsible rows for the Mobile version. IS THIS POSSIBLE?

Thanks for your attention!

2

@ChristosPhi For others to contribute effectively always provide inspectable urls

https://community.shopify.com/c/blog/how-to-get-support-from-the-community/ba-p/1399408

Yes this is possible using responsive CSS styles, and without file modifications if the theme support custom-css settings.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

If you know the CSS selectors for the elements use a custom-css setting for that page like the following in a custom-css setting.

@media screen and (min-width: 750px) {
 /* hide mobile elements here, example .collapsible { display: none; } */

}
@media screen and (min-width: 750px) {
 /* hide desktop elements here, example .mult-column { display: none; } */

}

Good Luck.

3

Hi Paul,

Thanks a lot for your reply.

The url is https://philab.eu/products/anti-wrinkle-firming-cream-50ml

Unfortunately, I am not familiar with custom css, so I don´t think I t´s clear to me what you suggest…