Issues with dawn theme banner blurring/cutting off image depending on screen size

Store Design
,
1

https://cozycovenshop.com/

pw: sksk

I’ve noticed on smaller screens the website crops the image so not everything is showing, including the text on the bottom of the banner.

Also on larger screens the image is blurry as its stretching to fit the screen.

Is there any workaround for these 2 issues? Searched around but haven’t found quite the right fix.

Thank you.

2

Hi @CozyCovenShop

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyNoah_0-1691639461300.png
PageFlyNoah_0-1691639461300.png2880×1516 387 KB

Hope this can help you solve the issue

Best regards,

Noah | PageFly

3

HI @CozyCovenShop
To resolve the problem regarding to the image blurry, I think you can try to use image has larger size.
To fix the problem regarding to image crop when responsive, I think you should add different image for desktop and mobile.
You can follow this guide to add the function add different image on desktop and mobile device:
https://www.youtube.com/watch?v=uGtL02KI1LE
I hope that video is helpful for you.

4

That definitely did help but is there anyway to not have the empty space whether it be by coding or by altering the image?

example.png
example.png1919×422 550 KB

5

Hi, please help me the code you added above with this one: