Hi everyone, I hope you can help me. In the mobile version all the images of the highlighted collections lose quality if I set only one column, how can I solve this?
A thousand thanks.
Hey @pclstore ,
Can I have the link to your store?
Hi, yes of course: www.procyclinglover.com password: pcl10
Hey @pclstore ,
Now I don’t recommend this because it may cause the images to load slower resulting in page speed issues (as they’ll load in original quality), but you can try and see if it loads at an acceptable rate, you can keep it
But you can go to your “Edit Code” option in the theme, search for ‘card-product.liquid’ and remove the lines (mine’s 61-66 inclusive) shown in the screenshot below and then saving.
The solution by @ThePrimeWeb would severely damage your PageSpeed scores as well and should only be tried as the last resort one.
Before even trying this I’d start with the one from this Gihub comment:
-
Open your card-product.liquid snippet
-
Find this code (this is from the latest Dawn, your should be similar:
- Add this code before:
{% assign columns_desktop = section.settings.columns_desktop | default: 4 %}
{% assign columns_mobile = section.settings.columns_mobile | default: 1 %}
- Find the following line (2 occasions, first one you can see in the snippet above):
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
and replace with this:
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: columns_desktop }}px, (min-width: 990px) calc((100vw - 130px) / {{ columns_desktop }}), (min-width: 750px) calc((100vw - 120px) / {{ columns_mobile }}), calc((100vw - 35px) / {{ columns_mobile }})"
Tim thank you very much, it works perfectly!