🎁 Great Deal: Use coupon yearend to get 20% off during both the Cyber Monday and Year-End Sale on any plugins. Buy Now!
Public Ticket #4886

PierreB

the layout of the variations on mobile is not good. There is a line break after each cell and no space between the different variations. The cells are not centred.
Can you give me the CSS to insert to change this?

wpx

wpx

Hi,

I hope you are doing well today.

Can you please share a product link (from your site) with me?

So that I can help with the theme-specific CSS.

Hope to hear from you soon.

Best Regards

wpxteam

wpxteam

Hi Pierre,

Please all of the previous CSS with the following block.

@media screen and (max-width: 767px) {
.pvtfw_variant_table_block table.variant{
width: 100%;
}
.pvtfw_variant_table_block table.variant tbody td:before {
display: none; 
}
.pvtfw_variant_table_block table.variant tbody{
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.pvtfw_variant_table_block table.variant tr{
border: 1px solid var(--pvtfw-table-border-color, #eee);
padding: 15px;
}
.pvtfw_variant_table_block table.variant tr:not(:last-child){
margin-bottom: 5px;
}
.pvtfw_variant_table_block table.variant tr td,
.pvtfw_variant_table_block table.variant tr td figure.item{
text-align: center;
}
.pvtfw_variant_table_block table.variant tr td figure.item img,
.pvtfw_variant_table_block table.variant tr td div.pvt-qty-input{
margin: 0 auto;
}
}

Here is the desired output.

We will wait for your feedback.

Thank you

Pierre Brisset

Pierre Brisset

This is better

thank you

wpxteam

wpxteam

-

wpxteam

wpxteam

Hi Pierre,

We are glad that you like the current visuals.

If you find our plugin and the support helpful, please leave your valuable review here: https://wordpress.org/support/plugin/product-variant-table-for-woocommerce/reviews/

Your rating keeps us inspired πŸ™‚οΈ

Thank you
Have a great day