fbpx
Want To Add Extra Images Per Product Variation For Free? Download Now

Color Swatches are rectangles instead of squares on mobile

Joshua Webb

Hi,

Can you review this site on mobile and help me fix the issue with the color variation swatches showing as long rectangles on mobile instead of squares. They should be squares like the other swatches for sizes.

Please help. Thank you.

Screenshot_20231115_181605_Chrome.jpg

Hakik Zaman

Hi Joshua,

Thanks for getting back to us. Unfortunately, I didn’t find the mentioned issue: https://i.imgur.com/b6O3GTP.png

Thank You

Hakik Zaman

Hi Joshua,

The issue is coming from your theme. They have added global CSS for all the <ul> and <li>: https://imgur.com/BodfuJP

So, I have added the following CSS to minimize the issue:

.woo-variation-swatches .wvs-archive-variations-wrapper .variable-items-wrapper .variable-item:not(.radio-variable-item) {
width: var(--wvs-archive-product-item-width,30px) !important;
}
.woo-variation-swatches .wvs-archive-variations-wrapper .variable-items-wrapper .variable-item:not(.radio-variable-item) {
margin: 4px !important;
}

Now it displays like this: https://i.imgur.com/y0kHTVO.png

Thank You

Joshua Webb

Hello,

Great. Thank you. This has worked. I appreciate your assistance on this.