How can I achieve a full screen image banner on mobile with the Dawn theme?

Store Design
,
1

Hi,

I currently have my website on a legacy Brooklyn theme and am trying to update to a 2.0 theme using Dawn. I really like how my mobile homepage image banner looks right now (it is full screen and right-aligned). How can I do this in dawn theme?

I have tried the solutions on other threads, but they all quite significantly reduce the image quality on mobile. As you can see, this blurriness does not happen on my current Brooklyn theme, despite the having the image full screen.

Any advice to help me match my current mobile image banner on Dawn to the one I have now on Brooklyn would be greatly appreciated! The image attached is what I am trying to achieve.

IMG_2038.PNG
IMG_2038.PNG828×1792 349 KB

1 Like
2

@glorygut

Yes show Full Screen Dawn Image Banner Mobile

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
@media screen and (max-width: 749px) {
.banner:not(.banner--stacked) {height: 100Vh !important;}
}

Thanks!

3

Hey thanks for your reply! This worked to make it full screen, but the resolution is quite compromised, any thoughts? Also, is there a way I can align it to the right?

4

@glorygut

Please share the store preview URL and storefront password!

TThanks!

5

@glorygut

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
@media screen and (max-width: 749px){
.banner__media.media > img {object-position: top right !important;}
} 
@media screen and (min-width: 750px){ 
.banner__media.media > img{object-position: center bottom !important;} 
}
6

thanks for your quick reply! I just tried that code in base.css but it didn’t seem to change anything, perhaps I am doing it wrong?

Screen Shot 2023-07-09 at 2.37.00 AM.png
Screen Shot 2023-07-09 at 2.37.00 AM.png2214×1302 267 KB

7

@glorygut

check the following Screenshot

closingbracket.jpg
closingbracket.jpg1575×727 74 KB

8

@glorygut

Remove the previously provided code.

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >section-image-banner. and paste this at the bottom of the file:
@media screen and (max-width: 749px){
.banner__media.media > img {object-position: top right !important;}
} 
@media screen and (min-width: 750px){ 
.banner__media.media > img{object-position: center bottom !important;} 
}