Re: shopify DAWN Banner image too big on desktop

Solved

shopify DAWN Banner image too big on desktop

MelissaM92
Tourist
13 0 1

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!

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
9534 1916 1950

This is an 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; }
}

 

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 7 (7)

Dan-From-Ryviu
Shopify Partner
9534 1916 1950

This is an 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; }
}

 

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

MelissaM92
Tourist
13 0 1

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
Shopify Partner
9534 1916 1950

Each section has its own Cusom CSSScreenshot_7.jpg

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

MelissaM92
Tourist
13 0 1

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
Shopify Partner
9534 1916 1950

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

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

MelissaM92
Tourist
13 0 1

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

BSSCommerce-HDL
Shopify Partner
2296 846 1061

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 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now