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

Variation Swatch alignment

Marty Srog

I am trying to center the swatches on my product pages.  I know that this is an option for pro users in the archive section.  What do I need to do to center the swatches on my product page but only for tablet and mobile?

 

Web page can be found below for an example.

https://ariaairfryer.com/product/2qt-retro-ceramic-air-fryer/

 

Any help would be greatly appreciated.

 

Thanks,

Marty

Hakik Zaman

Hi Marty,

Thanks for reaching out to us. Could you please paste the below code at Appearance > Customize > Additional CSS

@media screen and (max-width: 767px) {
   .elementor-7725 .elementor-element.elementor-element-59cf218 .elementor-jet-single-add-to-cart .variations {
       max-width: 100%;
   }

   .woo-variation-swatches .variable-items-wrapper {
      justify-content: center;
   }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
   .elementor-7725 .elementor-element.elementor-element-59cf218 .elementor-jet-single-add-to-cart .variations {
      max-width: 100%;
   }

   .woo-variation-swatches .variable-items-wrapper {
      justify-content: center;
   }
}

 

Note: Before checking, please don’t forget to clear your cache (browser, caching plugin and server-side cache)

Please let me know if it resolves your issue. Hope to hear from you soon!

Thank You

Hakik Zaman

Hi Marty,

Please place the below CSS at Appearance > Customize > Additional CSS

@media screen and (max-width: 900px){
   .elementor-10506 .elementor-element.elementor-element-19dd93a0 .elementor-jet-single-add-to-cart .variations {
      max-width: 100%;
   }
}

Thank You