Place title, review stars, price above image on phone

[TrendBlend]

Hello, I want to place this part of my product page:

on top of the image just for phone. Is there a way to do this? URL: https://nl.interiorglows.com/producten/glowcurtain-400-led-lampjes

kind regards,

Stef

[Guleria]

Hello @TrendBlend ,

Yes but it needs customization.

If you are looking for an idea please follow;

Copy the blocks code which you need at the top of image on mobile.

Use it inside the image wrapper div with hidden class for desktop.

Use media query and make it visible for mobile.

This is only the way to achieve it.

Regards 

Guleria

[TrendBlend]

Hello, I've tried doing so but it still does not work. Can you help me with it?

[Guleria]

Yes sure please drop an email to discuss further.

or please share what you tried and I'll  help to fix it. If you are closer to it

[TrendBlend]

Hello, I got this code now in my main-product.liquid: Dec 17 11:09 PM - Codeshare
And this code in my theme.liquid for styling: Dec 17 11:10 PM - Codeshare
It works now, but when I refresh on desktop, the price,reviews,title are set on top for a little bit before not being displayed again. Is there any way to just not let it show up on desktop instead of having a delay until it does not display anymore?

[Guleria]

Great
Use inline css to hide it ( display: none; ) so as soon as page loads it make the elements hidden.