Huge variables on single page mobile version

Hi There,

I chose on swaters setting – xxl
Anf its looks great on all the verstion.
Buy just on mobile version in single page its looks huge.
Need your help to decrease it here.

Thanks.

Attachments:

You must be logged in to view attached files.

Hi,

Try to add the following custom code to the Global Custom CSS area in the Theme Settings to reduce your switches from 90px to 45px on mobile. By modifying the “max-width” media query value, you can also choose from which screen width your switches on the single product page will start to reduce.

@media (max-width: 768px) {

	.product-image-summary [class*="wd-swatches"].wd-size-xxl {
		--wd-swatch-size: 45px;
	}
}

Kind Regards

thank you.
i already applied the code..

now i just noticed that on desktop its worse too.

Attachments:

You must be logged in to view attached files.

on mobile it fine now.

If the swatches seem too large on desktop, you can reduce their size using the “Swatch size” option (screenshot https://monosnap.com/file/m6W510Ekl8oUDGKMWuKbFLwlqDWTRM) in the attribute settings. Keep in mind that changing this option will cause the previously provided custom code to stop working, since it was based on the XXL swatch size.

To make it compatible with the new option, update the size class in the selectors of the custom code. For example:
• XXL: .wd-size-xxl
• XL: .wd-size-xlarge
• L: .wd-size-large
• M: .wd-size-medium

Replace the size class in your custom code with the class corresponding to the selected size. or example, if you choose XL as your new size, the updated custom code will look like this:

@media (max-width: 768px) {

	.product-image-summary [class*="wd-swatches"].wd-size-xlarge {
		--wd-swatch-size: 45px;
	}
}

Kind Regards

i changed the size to M

but now:
Mobile category page – tiny
Mobile single page – fine

Desktop category page – tiny
Desktop product page – fine

just the category page on both versions are tiny (mobile + desktop)

appreciate your help.

Please, explain in more detail what you mean by “category page”? Is it true that it means switches located on products inside the product grid or carousels? Please provide screenshots for more clarity.

Kind Regards

sorry,
when i saying category-page i mean the shop page.
like how the product shows on grid on the shop page.
so i mean that on single page its ok now (after i cahnged the size to M)
but on the shop page – the variations on the product layout its tiny (on mobile+desktop)

Thank you

Hi,

The size of switches M for products inside the product grid & carousels has the same size on desktop and mobile. To globally change it, use the following custom code:

body .wd-swatches-grid.wd-size-m {
	--wd-swatch-size: 30px;
}

Kind Regards

Hi
still, on shop page (Desktop only) its looks tiny.
on product page (desktop+mobile) its looks fine.

how can i increase the variable on shop page Desktop version only?

Attachments:

You must be logged in to view attached files.

Hi,

Try using the following custom code to adjust the size of product grid swatches on the desktop devices:

@media (min-width: 1025px) {
    .wd-product .wd-swatch {
    --wd-swatch-w: 30px;
    --wd-swatch-h: 30px;
}
}

Add this code to the Global Custom CSS Area in Theme Settings, and modify the values to achieve the desired size. Let us know if you need further assistance!

Kind Regards

[Author]

Posts