how to modify product template for mobile only

Kuroya
Explorer
46 3 3

Question:

how to modify product template for mobile only or putting the different product template on mobile view and desktop view

Long story short, I'm just trying to make

'.product-single__title .product_single_price .review-widget' to appear before .product-img-box on mobile view only.

 

since Product template is HTML instead of CSS, I know that '@media only screen' won't work for HTML, and I've tried the following code in my 'timber.scss.liquid' but nothing has changed, and if there's a way to have '@media only screen' in HTML version, please tell me.

@_media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
 	.product-single__title .product_single_price .review-widget 
 	.grid__item.wide--one-half.post-large--one-half.large--one-half.product-img-box{
 	display: inline;
    }
}
KetanKumar
Shopify Partner
14162 1649 5081

@Kuroya 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes