Improve image banner quality

[jewellerystore1]

Hello, does anyone know how I can make my image banner image better quality on the mobile view?

I added some code to improve the desktop view so I want the mobile view to be the same quality. Using Dawn theme. Please help!

https://iyixwsg9xo78ajhp-74563387678.shopifypreview.com

[Dan-From-Ryviu · Accepted solution]

Please try to update code to this and check again 

assign widths = '2400, 2400, 2400, 3000, 3000, 3000, 3000, 3000, 3840'

[laddisahsi]

Hi @jewellerystore1 

You called the low quality image here

You have to upload HD image here

[jewellerystore1]

I'm not sure what you mean, The photo is HD, it is the biggest it can be for shopify's size limit. The image is high quality, it turns blurry only in shopify.

[laddisahsi]

@jewellerystore1 

Can you please share collab access with me?

[Dan-From-Ryviu]

Hi @jewellerystore1 

Please go to your Online store > Themes > Edit codes > open image-banner.liquid file, find this line of code 

assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'

Change to this 

assign widths = '1100, 1100, 1100, 3000, 3000, 3000, 3000, 3000, 3840'

[jewellerystore1]

It's still blurry. I am only trying to fix the mobile view, if that helps at all. 

 

[jewellerystore1]

No thank you

[Dan-From-Ryviu · Accepted solution]

Please try to update code to this and check again 

assign widths = '2400, 2400, 2400, 3000, 3000, 3000, 3000, 3000, 3840'

[jewellerystore1]

It didn't work. I think it's more blurry

[jewellerystore1]

It's ok, I re-saved the image in Photoshop and it's much better quality. Thanks for your help!

[Dan-From-Ryviu]

You are very welcome

[jewellerystore1]

The image isn't clickable anymore. Can you help bring the link back?

[laddisahsi]

Hi @jewellerystore1 

Image is clickable at my end.

[jewellerystore1]

On mobile view?

Only desktop is working for me not mobile 

[Dan-From-Ryviu]

Please replace this code With this code 

opacity: 0 !important;

[jewellerystore1]

Which file do I find that code? 

It's not in image-banner.liquid

[jewellerystore1]

Hello, 

I found the code and replaced it but it has put a white gap above the image again. I had added code to remove this but it's back since changing the code. Can you help remove the white gap above the image?

 https://t9n9is14z08a1xvp-74563387678.shopifypreview.com

[Dan-From-Ryviu · Accepted solution]

Please add more this line of code to that code section 

height: 0px !important;

So the code will look like this 

@media (max-width: 767px) {
.banner__content.banner__content--middle-center.page-width {
    opacity: 0 !important;
    height: 0px;
}
}

[jewellerystore1]

Yes perfect. Thanks so much!!

[Dan-From-Ryviu]

You are very welcome, @jewellerystore1