shopify DAWN Banner image too big on desktop

[MelissaM92]

I'm currently having trouble with the dawn theme. I've personalized the website and am pretty happy with everything, but I can't seem to get the image banner right for the desktop. it cuts off a lot of the picture and its quite blurry. Can someone help me? these are the details to my site:

URL: moimeme.com.au

password: Kbf295GhpF113

Also, I'd like to get the text on the image banner to be moved to the left on mobile view. Can anyone help with this also?

Thanks in advance!

[Dan-From-Ryviu · Accepted solution]

Hi @MelissaM92 

Your image dimension is suitable for mobile only. I recommend you create two Image banner sections, one for mobile and one for desktop so that you can upload images separately and add custom CSS code to each section's custom CSS to hide mobile's section on desktop and vice versa.

Mobile section

@media (min-width: 768px) {
.banner { display: none; }
}

Desktop section

@media (max-width: 767px) {
.banner { display: none; }
}

[MelissaM92]

Could you please tell me how to insert each one separately? or the steps to put the codes in? tried to put it in the custom CSS part in theme settings but it ended up just completely removing the picture from desktop view? so not sure how to upload it separately

[Dan-From-Ryviu]

Each section has its own Cusom CSS

[MelissaM92]

Yes i have input both the codes in that same section. but then it just removes the picture for either view depending on which code goes in first or last, but either way it just removes the picture.

[Dan-From-Ryviu]

Please create 2 banner sections and add a code for each, not add both codes in the same section. 

[MelissaM92]

thank you for bearing with me. this worked. thanks 🙂

[BSSCommerce-HDL]

Hi @MelissaM92

Your image source have to zoom out to fit your banner size, from 1:1 to  rectangle ratio, therefore its going to more blur.

You can use some code here to fix a little bit:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media screen and (min-width: 750px) {
.content-for-layout.focus-none .section:nth-child(1) {
min-height: 1000px!important;
}
.banner.banner--content-align-left.banner--content-align-mobile-center.banner--small.banner--desktop-transparent.scroll-trigger.animate--fade-in {
min-height: 1000px!important;
}
}
</style>

Hope this can help you, If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍