Swaches not aligend properly to middle

.swatches-select.swatches-on-single {
display: inline-block;
vertical-align: middle;
}

This Css does not seem to work or solve the issue

Image on attachement!

Not dispalying correcly: (needs a fix!)
https://fastbaltics.eu/fast-whey80-proteiinipulber-500g/

Displays correctly if less variables:
https://fastbaltics.eu/fast-hera-80/

Attachments:

You must be logged in to view attached files.

Hello,

Do you want it like this? https://prnt.sc/rdwo53

Please add this code to the Theme Settings > Custom CSS > Global:

.swatches-select {
    margin-top: 20px;
}

If the swatches are in two lines code would not work. I mean this https://prnt.sc/rdwpb2 It is the way it works and it cannot be fixed.

Best Regards

Yesss I want it like in your first picture! But if I add your CSS code then product here
https://fastbaltics.eu/fast-hera-80/ swatches are not aligned any more.

Thats why I actually need your CSS expertice….because for single product I can fix it but CSS code should work for all the products. Also if it goes to second line. Then has to look nice (aligned middle)

Send you pic with explanations. And waiting more complex CSS solution 😉

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.single-product-page .variations tr td {
  position: relative;
}
.single-product-page .variations .reset_variations {
  position: absolute;
  left: 0;
  bottom: -20px;
  margin-left: 0;
}
.single-product-page .variations_form.variation-swatch-selected .variations {
  margin-bottom: 35px;
}

Best Regards

Thanks it worked very nicely!!!

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts