Show Different Desktop and Mobile Image Banner Dawn Theme

Shopify Discussion
1

I’m trying to show a different image on the desktop and mobile view of my website. I found a previous thread explaining how to do so but it didn’t work for me. I would like to be able to upload two different images for desktop and the mobile images on the image banner sections. I would also like to code so the desktop image to be hidden when viewing in mobile view and vice versa. Any help with this would be appreciated.

When referencing the previous thread I was able to code to upload an additional image in the image banner section but I couldn’t get the images to be hidden.

2 Likes
2

Hi @blacksoul666

This is Noah from PageFly - Shopify Page Builder App

You can create 2 separate banner section like this

PageFlyNoah_0-1692247057227.png
PageFlyNoah_0-1692247057227.png999×816 194 KB

Once you finished created it, you can let me know then i will implement a css code that can hide a section based on devices

Hope this can help you solve the issue

Best regards,

Noah | PageFly

1 Like
3

Hi @blacksoul666

You can create schema in same section for mobile image
then
using css display or hide the images for different resolutions.

Please let me know if you need any help from my side.

4

Hi @blacksoul666

You can follow the video tutorial below to assign a different content for desktop and mobile

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3 Likes
5

Hi,

I added another Image Banner section, could you let me know the css code to hide them please :slightly_smiling_face:

6

This worked perfectly, thank you!

7

Sorry for my late response, let me know if you need any help.

8

Absolutely brilliant! Thank you!

9

I followed the instructions and managed to get it to give me the option to display different images for mobile and desktop review but it when i preview my store it just puts the 2 images side by side. Any ideas how to fix this?