2 products per row on mobile !!

Thanks Sam. The products page still does not appear as it should. it’s created 3 columns instead of 2. Please visit this site on your mobile: https://redeadstock.com/beta/?post_type=product

Hello @dondada79,

You can replace this code:

@media screen and (max-width: 482px){
.woocommerce .products .tcol-ss-12.kad_product {
    width: 50%;
    float: left;
    position: relative !important;
    top: 0 !important;
}}

with this doe a better result:

@media screen and (max-width: 482px){
.woocommerce .products .tcol-ss-12.kad_product {
    width: 50%;
    float: left;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}}

Hope that helps.

Thank you.

That looks fantastic! Thank you so much.

Hello @dondada79,

It’s a pleasure helping you.

Feel free to ask if you need anything else.

Thank you.

Hello, please Sam help me out, I have tried all the codes you have posted still does not work for me,i really need to have a two column view on this website https://funkiestores.com

Hello @kachyemmanuel,

You need to add this CSS to your Custom CSS/ Additional CSS (Appearance > Customize > Additional CSS) for adjusting that:

@media screen and (max-width: 480px){
ul.products li.product {
    width: 50% !important;
}
.dfd-shop-archive.dfd-shop-columns-4 .products > li.product {
    clear: none;
    float: left;
}}

Hope that helps.

Thank you.

Wow, thank you so much, This is so great from you, saving people of a lot of stress for free, your a great man, thanks so so much

Hello,

It’s a pleasure helping you all here.

Feel free to ask if you need anything else.

Thank you.

Heloo sam , I am very grateful for your help the last time, please i understand it is posible that my wordpress website https://www.globalworldelivery.com can be viewed on mobile just as it is viewed on desktop, i do not want it to change from the main desktop view when accessed via mobile phone, please i would be glad if you help me with the right CSS to do that.

Hello @kachyemmanuel,

Thank you for sharing the issue here.

Unfortunately, there are no such Theme Options available in the theme to make it unresponsive or a few lines of CSS to cover your requirement.

It requires a lot of codes to be edited/deleted in your core files to make your site unresponsive.

However, you can contact the Theme author(s) or any Designer/Developer personally so that they can help you for achieving that.

Hope that helps.

Thank you.

Hey Sam (@soumendra)
I hope your still around and able to help me out. I must’ve tried 10 of your codes. Huge relief that 1 worked –

@media screen and (max-width: 750px){
.woocommerce .products .product {
max-width: 50% !important;
}}

BUT – Every other row is missing that 2nd product. =\ Every website needs a different code you said, I hope this can be fixed :3 Much appreciated it would be such a HUGE relief. Also is there a trick you use where you find out what code someone needs easily? I’d like to know how I can be a code master too ??

my website is Iepicshop.com
oceanwp theme
https://ibb.co/h5zKZ7 Pic

Hello @endgame421,

You can replace the above code with this for a better result:

@media screen and (max-width: 750px){
.woocommerce .products .product {
    max-width: 50% !important;
    clear: none;
}
.woocommerce ul.products li.product .title {
    min-height: 60px;
}
.woocommerce ul.products li.product .inner {
    min-height: 40px;
}
.woocommerce ul.products li.product .btn-wrap {
    min-height: 55px;
}}

Hope that helps.

Thank you.

It worked ?? ahhh the relief Sam (@soumendra) I’d love to send you a gift I appreciate you. Funny I could have stressed less these past 2 days my email never notified me of reply.

Hey Sam (@soumendra)
I noticed i have this gap in my cataog of categories of iepicshop.com using the code i posted below from you is that fixable? and do you accept donations?

@media screen and (max-width: 750px){
.woocommerce .products .product {
max-width: 50% !important;
clear: none;
}
.woocommerce ul.products li.product .title {
min-height: 60px;
}
.woocommerce ul.products li.product .inner {
min-height: 40px;
}
.woocommerce ul.products li.product .btn-wrap {
min-height: 55px;
}}

Hello @endgame421,

The issue is due to different title length. You can use this CSS to overcome the issue:

.product-category .woo-entry-inner.clr {
    min-height: 60px;
}

Hope that helps.

Thank you.