DIFFERENT PRODUCT LAYOUT ON DIFFERENT DEVICES

Hello,
I need help with this problem.
I need set different product page layout on big devices and different on small devices (mobile phones)

My actual layout is:
https://i.imgur.com/OwffEpi.jpg

But on mobile devices is product photo very small… here is screen:
https://i.imgur.com/wCiMHT6.png

I need something this one: https://i.imgur.com/tfDxTFN.jpg
Title product photo on full width first and others photo bottom.

For me best solution should be, change first one layout for mobile with css media query.
But how? I don’t find any working solution.

Thanks for help!

Hello,

We are glad to know that you have considered using WoodMart for your web-site. I hope you will be happy with it.

Unfortunately, it is not possible to use different layouts for different devices there. With CSS media queries you are able to change some CSS properties, but you can reinit this JS library for the carousel.

Kind Regards
Xtemos

How set this JS for mobile please?
it’s enough for me when on mobile show only one picture on full width on display (100%) with arrows on left and right sides to showing next or previous images…
In other words i need something solution when I have first image on full width… because now pictures are verry small its not good for using on mobile devices.

Thanks for help and your fast reply.

Unfortunately, we don’t have an instruction for this. It requires additional code customization and it is out of our theme support scope.

[Author]

Posts