DAWN THEME | Blurry image after enabling mobile and desktop images separately

Hi,

I am currently using the Dawn 2.0 theme which allows you to have two images on the homepage banner.

I’ve tried this method and the images fit perfectly on both devices. However, after implementing the code, the image became extremely blurry. @LitCommerce suggested creating a new post so he can explain it better to create a better community. Is anyone available to help?

1 Like

Hi @Logius ,

Please send your site and if your site is password protected, please send me the password. I will check it.

@LitCommerce Thank you for your reply but the theme I’ve mentioned in the post is currently unpublished due to the issue.

Here is our site URL.

Hi @Logius ,

Can you send me the preview link? I need to check the link showing Dawn theme.

@LitCommerce Here it is: https://kitchenequipped.com/?_ab=0&_fd=0&_sc=1

Thank you!

Hi @Logius ,

Can you get link preview? The link you sent is still incorrect. Refer:

I will check it

Thanks, here it is. Let me know! https://exttaonkkeop9d65-43257626774.shopifypreview.com

Hi @Logius ,

Please go to sections > image-banner.liquid file and change code here:

Hope it helps!

2 Likes

You’re a legend, worked for me.

1 Like

Im too amateur lol. The code for the banner was changed to make the whole image clickable, and then I added the code to make the 2 different images for desktop and mobile, now desktop is blurry so Im trying to follow what you have put above for the fix but my code doesnt look like that and I worried Im gonna delete something that I shouldnt, any chance of any help please, thank you so much

Hi @1KNDclothing ,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

1 Like

Hey,

I was following the solution to hide an image on mobile. It worked, but the images are very poor quality now, and the solution above where you edit the image-banner.liquid file- the file no longer looks the same as in the screenshot from 2021.

Thanks.

Hi @styleshop27 ,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

I’m having the same issue as well after installing the code. My desktop image banner is now very blurry. Please can you assist with the issue?

https://mc8254vo60zcfls9-82630934831.shopifypreview.com password: dichew

Hi, is there a link to the code I can copy this instead of the image? I’m having this issue, first adding code to make the image banners clickable, then adding code to have separate desktop and mobile, and so now they are blurry, plus the mobile one is zoomed in more than I would like. Can you provide the raw code to copy to fix this? Thanks so much!

I’m using Dawn 11.0

Hi @LitCommerce ,

I’ve created a new question here: https://community.shopify.com/c/shopify-design/dawn-theme-blurry-hero-image/m-p/2325134#M613528.

Cheers

Same here, and how did you solve it?

Hi, Could you share “after” codes with me? Same issue here and I would like to try your codes?

I submitted a question on Shopify Community and here is the link you can check it out:https://community.shopify.com/c/shopify-design/the-desktop-banner-blurs-but-mobile-is-ok-i-use-the-code-to-make/m-p/2428534/highlight/true#M638707

Thank you