Liquid, JavaScript, themes, sales channels
Hi all,
I have just launched my website and I have noticed that when in desktop mode the images blow up too large and become blurry but in mobile view it looks perfect.
I am using the debut theme. If anyone could give me a hand or point me in the right direction to resolve this issue that would be awsome!
Website: www.catchinsnags.co.nz
Thanks.
Solved! Go to the solution
This is an accepted solution.
@Catchin, do this to fix it in 20 seconds:
1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
@media (min-width: 767px){
#shopify-section-hero-1{
margin-top: 0 !important;
}
[id] .hero{
max-width: 1000px !important;
margin: auto auto !important;
height: auto !important;
}
[id*='#shopify-section-hero'] *,
[id] .hero *{
background-size: contain !important;
height: auto !important;
}
}
You can modify the width by altering the value 1000px. This code will be applied exclusively to desktop devices.
Because these images are being rendered as CSS backgrounds, customization is a bit more limiting but I hope it helps you out.
This custom section can also be a potential solution for your use case.
Kind regards,
Diego
This is an accepted solution.
@Catchin, do this to fix it in 20 seconds:
1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
@media (min-width: 767px){
#shopify-section-hero-1{
margin-top: 0 !important;
}
[id] .hero{
max-width: 1000px !important;
margin: auto auto !important;
height: auto !important;
}
[id*='#shopify-section-hero'] *,
[id] .hero *{
background-size: contain !important;
height: auto !important;
}
}
You can modify the width by altering the value 1000px. This code will be applied exclusively to desktop devices.
Because these images are being rendered as CSS backgrounds, customization is a bit more limiting but I hope it helps you out.
This custom section can also be a potential solution for your use case.
Kind regards,
Diego
Thanks so much for your help! Case solved!
Hello!
Can you help us with a similar issue? The image I am using for our collection description is appearing too large on the mobile version. The URL is below;
https://www.theclosettradingco.com/collections/tctc-x-cancer-cartel
Thank you so much!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024