Hi everyone! I am hoping that someone can help with the fallowing(my url mysticmoods.co.uk); I have set the variant picker with meta images, on mobile I have everything set up as width and hight of the block 50px x 50px. For the desktop it is 46.89px x 36px. Does anyone know how to set up this to reflect the same px as for mobile. I have tried a few codes but nothing seems to work. Currently the variant images for desktop show totally out of proportion. Hope someone can help.
Always backup themes before changing files.
Somewhere in your base.css you have a rule like the following:
@media (max-width: 767px) {
.product-form__input input[type="radio"] + .color-swatch {
border: 1px solid #f4f5ff;
width: 50px;
height: 50px;
padding: 0;
}
}
If you put that style there either remove the surrounding media query part so the style applies to both mobile and desktop.
.product-form__input input[type="radio"] + .color-swatch {
border: 1px solid #f4f5ff;
width: 50px;
height: 50px;
padding: 0;
}
Or use that CSS in a custom-css setting in the theme editor in the product template.
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
1 Like
@PaulNewton thank you very much for your reply. All good now, it was the @media (max-width: 767px) {.
Thank you!