How can I adjust the mobile banner size on the Dawn Theme?

Store Design
1

Hello, I’m attempting to change the mobile image banner size since on desktop and full screen the banner I have looks wonderful. When I go on mobile however the image zooms in a lot and cuts down the dimensions. Is there anyway to make it so on mobile the banner image doesn’t drastically zoom in. Thank you help any is really appreciated. Store is forwardfurniture.ca

2

Hi @WraithAm

Please share your store URL, page URL and also password (if your store has one) so we can help you.
If you want to make the image show different between desktop and mobile, you can follow this video

https://youtu.be/vfY6G35SlEE

3

Hey here’s the store url https://forward-furniture-4118.myshopify.com/admin/themes

Don’t think I have a password

4

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

@media(max-width: 749px){
#Banner-template--16920643797314__image_banner {
height: 100vh;
}
}
5

hmm no luck didn’t work, do you want me to send you authorization to my account? Might be easier

6

Hi @WraithAm ,

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

@media screen and (max-width: 749px) {
  .banner .banner__content:before {
    padding-bottom: 100%!important;
  }
}
1 Like
7

Worked thank you!

1 Like
8

Hi @LitCommerce @WraithAm @ExpertRookie I have a question. I used the solution, but it looks like this now: is there a way to make the image fit the space?

IMG_5C191CC34E1A-1.jpeg
IMG_5C191CC34E1A-1.jpeg1170×1975 115 KB

9

Hey, I’m facing the same issue on my mobile
my site url is: dealsoye.pk
kindly have a look and help out me
Regards

10

Hi @am_i_abdullah ,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

11

Hi @ExpertRookie

This solution is not working for me, is there any other alternatives, Thanks