Dawn Theme - Changes in image banner height resulting in a cropped image

Store Design
1

I am setting up a new store using the Dawn theme. I want to make the image banner responsive for different screen sizes. I was challenged with the cropped banner images when using default dawn theme settings.

I followed the solution given in the thread with min-height: 55rem, it solved my issue on the 14-inch screen size but I still have the issue on my 16-inch screen where the images are getting cropped.

@media screen and (min-width: 750px){ .banner { min-height: 55rem !important; flex-direction: row; } }

https://community.shopify.com/c/shopify-design/dawn-theme-decrease-image-banner-height/td-p/1325639

When I am checking the site on a mobile device, I see a big white space under the first image. Any suggestions to solve the issue? Thanks.

My store url: https://learningexpressway.com/ password: learning

2

@ambysan

Try adding the following code to your theme.liquid file

@media (max-width: 480px) {
#Banner-template--15280260546582__image_banner .banner__content--bottom-right {
display: none;
}
}

Let me know if it solves your issue

3

H Umair, I tried the above code but it had no impact on my site.

4

@ambysan ,

Then try with the !important flag i.e the following code intead of the above

@media (max-width: 480px) {
#Banner-template--15280260546582__image_banner .banner__content--bottom-right {
display: none !important;
}
}