how to modify product template for mobile only

46 3 3


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{
 	display: inline;
Shopify Partner
14162 1649 5081


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 regarding any help
Shopify Expert | Skype :
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing