How to fix banner image sizing issue on Dawn theme?

Store Design
1

Can anyone help?

Have uploaded an image banner on my homepage, the image seems to keep zooming in on mobile and desktop. The only way this stops is if I select ‘large’ banner image size, which seems far too large. For mobile I want it to just about fill the page before scrolling down to other content.

Any help would be amazing - smaraldn3.

Thank you!

Store - smaraldn3.myshopify.com

Thanks so much!

2

Hi @Ankita31
Have you try to change in the section settings?
I think in the section settings has settings for the size adapt with image size.
Or if you want to add the different image for desktop and mobile, you can try to follow this video to know how to do: https://youtu.be/vfY6G35SlEE

3

Hi ExpertRookie!

Thanks for your reply, yes I have changed it to adapt to image size, but on mobile it goes too far down, I would like to make the length of the image shorter on mobile if possible? Are you able to please help with this?

Thank you

4

HI @Ankita31
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

/*desktop*/
@media(min-width: 749px){
#Banner-template--14328136794241__image_banner {
  min-height: 459px;
}
}
/*mobile*/
#Banner-template--14328136794241__image_banner {
  min-height: 259px;
}
5

Hey @ExpertRookie

I have tried the codes, it makes the banner image on my desktop really small in height but doesn’t change anything on mobile for me.

I have messaged you my password too should that help you - any help would be greatly appreciated.

Thank you

6

@BSS-Commerce Is this something you can help me with please? Thank you :slightly_smiling_face:

1 Like
7

Hi @Ankita31

Please follow these steps:

Go to Edit Theme Code → go to theme.css file (or global.css or base.css). Then put the following code at the end of the file:

@media only screen and (max-width: 500px) {
  .banner.banner--content-align-left.banner--content-align-mobile-left.banner--medium.banner--desktop-transparent {
      min-height: 100vh;
   }
}

Here is the result:

  • On mobile

view.png
view.png579×958 323 KB

  • On Desktop:

view (1).png
view (1).png1247×974 207 KB

I hope that it will work for you.