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

first tooltip image out of the screen in mobile

Jose Maria Blas Garcia

I purchased Variation Swatches for WooCommerce Pro versión yesterday because I wanted to implement the tooltip image on my site. https://ekstromfurniture.com/

Congratulations for your work! I like the result a lot but I have an issue in mobile versión:

It happens that the first tooltip image appears to far to the left so it goes outside of the screen and it cannot be completelly visible. See attached screenshoot.

Could you help me with this? I think about two possibilites:

  1. Justify swatches to the center, so the first tooltip image would appear inside the screen.
  2. Make somehow that every tooltip impage pops up on the middle of the screen.

FYI, in order to get option one done, I tried the following code on: /wp-content/plugins/woo-variation-swatches/assets/css/frontend.min.css?ver=1.1.19

.woo-variation-swatches .variable-items-wrapper {display: flex;flex-wrap: wrap;margin: 0!important;padding: 0;list-style: none;justify-content: center;}

But the aligment of the swatches didn’t change.

Hakik Zaman

Hello Jose,

Thanks for reaching out to us. Please put the below code at Appearance > Customize > Additional CSS and hit Publish button-

@media screen and (max-width: 767px){
   .variable-items-wrapper li:first-child::before {
      margin-left: 120%;
   }
}

Hope it will help. Please let me know if it works for you.

Thanks

Jose Maria Blas Garcia

Hello Hakik,

Yes! It worked perfectly. Thanks!

I wonder how I should do to get option 1 (Justify swatches to the senter). Could you help?

 

Thanks.

Jose.

Hakik Zaman

Hello Jose,

Please put the below code at Appearance > Customize > Additional CSS and hit Publish button-

@media screen and (max-width: 767px){
.single-product .variable-items-wrapper {
      justify-content: center;
   }
}

Hope it will resolve your second issue. If you found my support helpful, my humble request to you to write your beautiful thought here: https://wordpress.org/support/plugin/woo-variation-swatches/reviews/?filter=5

Your beautiful thought keeps us inspired.

Thank You