Reply To: How to put 2 products side by side on mobile instead of just having 1??

[Mobitex]

#516711

Hi fatshady
i found a custom css solution for this issue, but you will have to play with some stuff.

First of all, this only happens in mobile view, so you will have to use @media css

@media only screen and (max-width: 800px) {
}

Then, inside there, you will do two things, first, you will prepare the wrapper (ul) to have a flex behavior, in my case:

@media only screen and (max-width: 800px) {
/* lists on mobile */
div.woocommerce.columns-4 > ul {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
Then you will change the width and other stuff for the elements into there (li)
div.woocommerce.columns-4 > ul > li {
width: 50%;
box-sizing: border-box;
}

Maybe you will need to inspect the selectors and change them to achieve it, but you can try with this custom css

@media only screen and (max-width: 800px) {
/* lists on mobile */
div.woocommerce.columns-4 > ul {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
/*li elements on mobile*/
div.woocommerce.columns-4 > ul > li {
width: 50%;
box-sizing: border-box;
}
}

it worked for me, good luck with it!