Reputation: 25
Morning all,
I can't seem to get my Woocommerce related products to show in a 2 column, side by side format. When viewed on mobile device
You will see on this page that the related products are one after another, id like 2 side by side before a new row starts. https://ruggedasylum.com/product/solo-smoke-free-fire-pit/
Can someone assist me with how this is achieved, please?
I have tried this so far but it only makes smaller and continues to place 1 product on each line. It also moved the 'Related Products' title across to the left instead of centered.
@media screen and (max-width: 767px){
.woocommerce .related.products {
width: 50% !important;
}}
I have gone onto W3 Schools and the CSS code they suggest for side by side in a responsive view doesn't seem to make a difference, less so than the code above.
please note I am happy with the way it is currently looking on the desktop version of the page.
I look forward to your input, a very grateful Ryan :)
Upvotes: 2
Views: 2276
Reputation: 56
@media screen and (max-width: 767px){
.related.products ul.products li.product {
flex: 0 1 auto;
width: 45%;
}
}
that should do the trick but you might want to adjust % for more info on flexbox, u can visit this https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Upvotes: 3