2 products per row on mobile !!

Thank you very much, i added the code but i dont get 2 products, i got one product to the left now, am i still missing some code?

Hello,

Sorry for the typo. You need to replace this:

width: 50%;

with this for a better result:

width: 48%;

Hope that helps.

Thank you.

• This reply was modified 7 years, 1 month ago by Sam.

Hello, that worked perfect, thank you. i have another problem that my products are not on the same horizontal line. i think it is because i have different size on pictures, but is there any way to change so the products align on text instead of picture?

thx

Hello,

For that you need to replace all the above codes with this for a better result:

@media screen and (max-width: 766px){
ul.products li.product {
    width: 48%;
    float: left;
    min-height: 300px;
}
ul.products li.product:nth-of-type(2n) {
    margin-left: 4%;
}}
@media screen and (max-width: 415px){
ul.products li.product {
    min-height: 411px;
}
ul.products li.product .woocommerce-LoopProduct-link {
    min-height: 301px;
}}
ul.products li.product img {
    min-height: 150px;
}
ul.products li.product .woocommerce-LoopProduct-link {
    min-height: 280px;
}

Hope that helps.

Thank you.

@soumendra i know we’re been a headache in your head but i tried all codes provided and not working on my site to view 2 columns in the product page when website viewed from mobile , i even tried to play in the numbers and everything didnt work for me
i’m using woocommerece
This is my website url : https://lizzycrafts.com/

Thank you so much sam for helping everyone !

Hello @amrscorpio,

Sorry for the late response.

I am really glad to help you all.

The above codes are not working for you because you have different coding in your site.

You can try adding this CSS in your Custom CSS for adjusting that:

@media screen and (max-width: 770px){
.woocommerce .products .product {
    width: 50% !important;
}}
@media screen and (max-width: 661px) and (min-width: 340px){
.woocommerce .products .product {
    min-height: 390px;
}}

Hope that helps.

Thank you.

@soumendra it works ! thank you so muchhhhhh !
i was wondering if i can do this in the home page too
it does work now in the product pages
is there a code for homepage sliders to show 2 columns per slide as well ?

Thank you so much for helping us

Hello @amrscorpio,

For homepage sliders you need to add this CSS to your Custom CSS:

@media screen and (max-width: 399px){
.home .recent-products .products .owl-item {
    width: 188px !important;
}}
.home .recent-products .products .owl-item ul li {
    width: 100%;
}

You can adjust the media value if required.

Hope that helps.

Thank you.

@soumendra Man you’re more than amazing !!! every code you said just worked straight away. your amazing helper just straight to the point and you say the proper advices. Thank you millions !!!

Hello,

I am glad that I can help you with your queries. Please let me know if you need anything else.

Thank you.

I spent entirely too much time before asking for help. Sam you’re about to be my savior.

https://Www.nolascooterwerx.com/shop

I want to try hopefully 4 products wide on mobile. However if I want it to be only 3 because 4 is too small what would I change. I want to understand it. Is my theme from what I see with others on mobile downsizing my view to only display 2 products and your css code is making it wider and the page is reforming?

Thanks for the help.

Hello @jordanmendez205,

You can add this CSS to your Custom CSS for viewing 3posts in mobile view:

@media screen and (max-width: 771px){
.woocommerce ul.products li.product {
    width: 33% !important;
    float: left !important;
    clear: none !important;
    min-height: 426px;
}}
@media screen and (max-width: 575px){
.woocommerce ul.products li.product {
    min-height: 380px;
}
.woocommerce ul.products li.product .button {
    padding: 10px 5px;
    width: 75px;
    white-space: unset;
}}

Hope that helps.

Thank you.

Hello @soumendra

Thanks for the help you’ve been providing to people so far. I’m impressed with you kind of person.

Please i need help in this area too. Mine is a cosmetics site which most i’ve seen usually have 2 columns in 1 row on mobile view.

The site is https://thedemosite.online not a permanent domain though.

PLEASE NOTE that domain may redirect you to us.thedemosite.online, but never mind. It has subdomains where visitors are redirected to based on IP address.

However, everything is done through 1 admin panel and affects all subdomains.

Kindly help me get the custom CSS code as you’ve done for others.

Thanks a million.

Hello @headwaters,

You can try adding this CSS to your Custom CSS/ Additional CSS for adjusting that:

@media screen and (max-width: 546px){
.entry-content .woocommerce .row .product:not(.col-xs-12) {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -moz-box-flex: 0;
    -moz-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
}}

Hope that helps.

Thank you.

Thank you @soumendra for your prompt response. However the code did not work as expected. It actually divided the page into 2 columns but the products are STILL NOT side by side See the screenshot here

Looking forward to more help in solving it

Cheers

• This reply was modified 7 years ago by headwaters.