Dawn theme banner image on mobile and computer

Store Design
1

HI, I’m using Dawn theme right now and I want to have different banner images on mobile and computer. Since dawn theme allow me to upload 2 banner images. I want to make the first image for computer and second image for mobile.

I have tried some code before and it did allow me to display different images on mobile and computer but the mobile image is cut off. Can someone help me add some code so both images will be correct?

Thank you all!

1 Like
2

@Grace_0417

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hi URL is www.cleandco.com

Password: diwali2023

4

Thank you. My url is therealgelnails.com. no password

5

Thank you. My url is therealgelnails.com

6

@LitCommerce can you see if you can help me with this? I used your code on another post about the same issue and I did have 2 separate images on my laptop and mobile. But the mobile one is cut off.

I used the code below

banner__media:first-child { width: 100%; } .banner__media+.banner__media { display: none; } @media screen and (max-width: 749px) { .banner__media:first-child { display: none; } .banner__media+.banner__media { width: 100%; display: block !important; } }

Andy Url is therealgelnails.com

Thank you

7

Hi @Grace_0417 ,

I checked and didn’t find the code, you can re-add it and send me the preview link. I will check it.

8

Hi. Here’s a screen shot of it. The desktop version looks right. But the mobile one is cut off.

Screenshot_20221021_105623.jpg
Screenshot_20221021_105623.jpg1080×2191 215 KB

9

Here’s the code again

.banner__media:first-child { width: 100%; } .banner__media+.banner__media { display: none; } @media screen and (max-width: 749px) { .banner__media:first-child { display: none; } .banner__media+.banner__media { width: 100%; display: block !important; } }

the original post link is here

https://community.shopify.com/c/shopify-design/separate-banner-images-on-mobile-and-desktop-dawn-theme/td-p/1362462

Thank you.

10

Hi @Grace_0417 ,

I can’t find the section you posted, can you re-upload the image and send me the preview link again?

Screenshot.png
Screenshot.png373×201 18.1 KB

11

here’s the code you posted.

I deleted the picture because its messed up. That why you cant see it. My mobile version doesn’t have a banner image anymore because I deleted it. And my computer version still has one.

Screenshot_20221024_163337.jpg
Screenshot_20221024_163337.jpg1080×1864 130 KB

This is the image if I keep your code and my image. As you can see, the image was cut off. Any code I can use to make sure the image shows completely?

Grace_0417_0-1666643916800.png
Grace_0417_0-1666643916800.png197×400 103 KB

12

Hi @Grace_0417 ,

I can’t see the mobile image, can you re-upload the mobile image and send me the preview link, I will check it.

Because I can’t check it through screenshot, when checking your site link, like my previous screenshot, I can’t find it.

13

hi, thank you so much for your patience. I uploaded my picture and left it there. you can see it on mobile version now. You can see it’s cut off. I just want to show the whole picture. Thank you.

14

therealgelnails.com is my url

15

Hi @Grace_0417 ,

Go to Assets > base.css and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
  #shopify-section-template--15237218566304__image_banner .banner__media+.banner__media {
      height: 50rem !important;
  }
}

Hope it helps!

16

Thank you. It worked. appreciate it

1 Like
17

Hi @Grace_0417 ,

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.