Blurry banner on mobile view

[nothingchanges]

My mobile view banner looks very blurry but clear on desktop. Can someone help me on this please?

Password : kyle12477

these are the pages that appears blurry on mobile but clear on desktop :

https://nothingchanges.com.my/

https://nothingchanges.com.my/collections/women

https://nothingchanges.com.my/collections/men

https://nothingchanges.com.my/collections/eid-25-the-eid-venture-of-alys

https://nothingchanges.com.my/collections/new-arrivals

https://nothingchanges.com.my/pages/about-us

[Kudosi-Tracy]

Hello, 

This usually happens because of image resolution or how the image is being scaled. Here are some steps I would recommend:

1. Check Image Resolution:

• Make sure the image is high-resolution. For mobile, it's best to use at least 1200px wide. If it's a hero banner, go for 1920px wide to cover most screen sizes.
• The image should be in PNG or high-quality JPEG format to maintain clarity.

2. Responsive Image Settings:

• Check your theme settings. Some themes compress or resize images for mobile, which can cause blurriness. Look for settings related to image optimization or lazy loading.

3. Use Separate Image for Mobile:

Some Shopify themes allow you to upload a different image for mobile. This lets you optimize the resolution specifically for smaller screens.

4. Test on Multiple Devices:

Use Chrome's Developer Tools or other responsive design testers to see how the image looks on different screen sizes.

[Ahmad31]

Hi @nothingchanges, Banners looks well on both mobiles and desktop screens. 

[nothingchanges]

No, it's blurry. Please help

[Ahmad31]

@nothingchanges First you need to upscale your images by using canva 

[nothingchanges]

do you have a specific size suggestions?

[Ahmad31]

by using this app on canva you need to upload your current images upscale it and replace it with orignal

[nothingchanges]

it is still the same. not working

[Dan-From-Ryviu · Accepted solution]

I edited the code in a slideshow.liquid, main-collection-banner.liquid, and image-banner.liquid files to solve this issue for you. 

[nothingchanges]

you saved my life! thank you!

[Dan-From-Ryviu]

Very welcome!

[sabinac]

Hi!  can you please share what were the adjustments done on the code? thanks!