Hi,
Are there any Beaver Builder configuration options or CSS available to override the default behavior of displaying related products in a single column on mobile device?
I’ve tried the below code snippet, and it seems to create two columns, but the products are only displayed on the left hand side, there are none on the right-hand side, only an empty column.
@media screen and (max-width: 767px){
.related.products ul.products li.product {
flex: 0 1 auto;
width: 45%;
}
}
The link is here under Sleep Essentials.
Just to reiterate, the issue is on mobile. If you reduce the screen width, you can see that the CSS above squashes the recommended products to the left but doesn’t stack in 2 columns.
Thank you!