<span class="resolved" aria-label="Resolved" title="Topic is resolved."></span>Mobile view 2products in one row

Replies: 1

Hi team,

I want my theme to show two product in one row in mobiel view instead of showing like this:

https://snipboard.io/6RN1L5.jpg



It should be implement on category page shop page and home page also on product page fir related products and corss selling products.

I tried couple of codes but nothing working. I have added theme in additional CSS file(Customisation page) of theme also i tried with code snippet.

Please find below code: 

Code1:

@media (max-width: 480px) { .products-grid .product { width: 50% !important; }}

Code 2:

@media only screen and ( max-width: 980px ) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 47.5% !important;
margin-right: 2.5% !important;
}
.woocommerce-page ul.products li.product:nth-child(2n) {
margin-right: 0 !important;
}
} Code 3: @media(max-width:767px){
.entry-content .products li {
float: left;
width: 50%;
}
} Code 4:
.categories-grid .product-category {
width: 50%;
}

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer