Image banner is cut off in desktop view - Dawn 3.0

Store Design
1

When I preview desktop view in dawn 3.0 theme, my image banner is cut off on the top and bottom of the image (model head and legs are cut off). The image quality also turns blurry once uploaded. The image dimensions are 1600px x 1050 px.

How can I make the whole image banner visible and image quality to be HD?

Any help will be greatly appreciated. Thanks

2

Send the URL please,

3

https://ixdl7970lksq78ts-57449808054.shopifypreview.com

4

Hi you need to change in css file only for the desktop view.

SWSolutions_0-1660824887284.png
SWSolutions_0-1660824887284.png1904×915 180 KB

5

Does changing it through the css file update the whole banner to be visible permanently for every viewer who views on desktop?

I can’t seem to edit the css file as the website isn’t published yet. Can I update this in the theme code?

1 Like
6

@bykk

sorry but you each images different size

7

Hi @bykk ,

You can refer https://tiny-img.com/blog/shopify-theme-image-sizes/#dawn-theme-image-sizes

Hope it helps!

8

Hi @bykk ,

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

@media screen and (max-width: 749px){
#shopify-section-template--15742100930742__16613055677bbf6afd .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 20rem !important;
}
}
1 Like
9

Hello, thank you for your reply but the code only worked on the first banner, the rest of my banners are still cutoff. How to make all the banners fully visible on mobile view? Thanks!

10

Hi @bykk ,

Please change code:

@media screen and (max-width: 749px){
	.banner__media,
	.banner__media img {
		position: relative !important;
	}
	.banner__content {
		display: none !important;
	}
}
1 Like
11

Hi @bykk ,

Please add code:

@media screen and (max-width: 749px){
.banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 20rem !important;
}
}