2 column woocommerce product in mobile view is not neat.

Hello, this is a little bug, fixed for the next release, in the meantime, use this css code:

@media only screen and (max-width: 768px) and (min-width: 481px) {
.woocommerce .products.oceanwp-row.tablet-col .col {
    clear: none;
}
.woocommerce .products.oceanwp-row.tablet-3-col .product:nth-child(3n+1) {
    clear: both;
}
}

thankyou, but that is css code for tablet right? is there any solution for phone view?

thanks.

• This reply was modified 6 years, 5 months ago by quthubm.

Ops, sorry ??

Add this code:

@media only screen and (max-width: 768px) and (min-width: 481px) {
.woocommerce .products.oceanwp-row.tablet-col .col {
    clear: none;
}
.woocommerce .products.oceanwp-row.tablet-3-col .product:nth-child(3n+1) {
    clear: both;
}
}
@media only screen and (max-width: 480px) {
.woocommerce .products.oceanwp-row.mobile-col .col {
    clear: none;
}
.woocommerce .products.oceanwp-row.mobile-2-col .product:nth-child(2n+1) {
    clear: both;
}
}

thankyou ??

You’re welcome ??

Hi! I tried to insert this code into Custom CSS/JS Section but result was unchanged. It would be appreciated If you can guide us the process from root. Your theme is beautiful and the two column layout in mobile will enhance its user experience.

Hoping a prompt reply.
Regards

Code:

@media only screen and (max-width: 768px) and (min-width: 481px) {
.woocommerce .products.oceanwp-row.tablet-col .col {
    clear: none;
}
.woocommerce .products.oceanwp-row.tablet-3-col .product:nth-child(3n+1) {
    clear: both;
}
}
@media only screen and (max-width: 480px) {
.woocommerce .products.oceanwp-row.mobile-col .col {
    clear: none;
}
.woocommerce .products.oceanwp-row.mobile-2-col .product:nth-child(2n+1) {
    clear: both;
}
}

Hello, can you send me the page url where you have this problem? Do you use the latest theme version? If you have disabled a script, go to Theme Panel > Scripts & Styles, click Save Changes, then clear your cache.

@media (min-width: 768px) {
.woocommerce-product-gallery.woocommerce-product-gallery–with-images {
float: left;
width: 48%;
}

.woocommerce-page .product .summary {
float: right;
width: 48%;
clear: none;
}
}

W3 total cache product page problem solution – just note

Not working for me. I have the same problem… the mobile view with 2 coloums looks terrible. Anyone can help ?

Hello,

Can you share your site link so that I can check it?