How to have contents in two columns in mobile view

Chi-K

For better use of space, how do we have content be in two columns like in screenshot. In mobile view. Single column is too big.

Chi-K

Similarly for Virtuemart too. Like follows

saguaros

Chi-K

You can use this custom CSS:

@media (max-width: 480px) {
.vm-col.product {
    width: 49% !important;
    flex: none !important;
}
}

Chi-K

How about two columns for this one?

Also for related items tooo...

https://v2.singledosebrew.com/category-layout/piece-sofa-sectional-lounger-detail

Also it seems the top two items not aligned.

You can see it here
https://v2.singledosebrew.com in mobile view

Thanks!

saguaros

Chi-K

You can update above code to:


@media (max-width: 480px) {
.vm-col.product, 
.layout-home-3 .vm-categories-wall .vm-categories-wall-catwrapper {
    width: 49% !important;
    flex: none !important;
}

.product-related-products .product-field {
    width: 49%;
    float: left;
}

}