2 products per row on mobile !!
-
Hello !
I want a 2 products per row when store is viewed on mobile. I have taken a screenshot from another theme that is doing that here is the screen shot —> http://imgur.com/YUTYZUZ
Cheers !
-
Good Morning Sam,
I want to show 2 products per row on mobile, I really appreciate your help, this is my store:
Thank you!!!
Hello @spotcamilo,
Currently, I can see two products in a row in mobile device: http://take.ms/ik8TR
Are you referring to some other page? If so then please share a direct link to the page where exactly you are facing the issue so that I can take a look at it.
Looking forward to helping you.
Thank you.
Hi @soumendra
Can you also help me with the correct coding to make all product pages show products in 2 columns (in mobile view):
https://glory2god.faithThanks alot!
May God bless you.
- This reply was modified 5 years, 10 months ago by lullana.
Hello @lullana,
Hope you are doing well today.
You can try adding this CSS to your Custom CSS/ Additional CSS for adjusting that:
.qodef-pl-outer.qodef-outer-space { height: auto !important; } .qodef-pl-holder.qodef-masonry-layout.qodef-two-columns .qodef-pli { width: 50%; float: left; left: 0 !important; top: 0 !important; position: relative !important; }
Hope that helps.
Thank you.
Hi @soumendra
Hope you are also doing well today.
Thank you very much for the code, had 2 questions on it tough:
When scrolling down, the 2th 3th and 4th photo go down. Do you have a solution for that.
Also if it’s possible for the individual product pages to view in 2 rows, for example this page https://www.glory2god.faith/sweatshirts-2/
Thank you!
Hi @soumendra
I’ve tried many code you gave
I didn’t know why my site still 1 column
Please take a look at this
http://www.kaukah.com
And I’ll very thank fully if you help meHello @lullana,
Sorry for the late response.
When scrolling down, the 2th 3th and 4th photo go down
That is some sort of feature of the theme. You can check the theme’s options panel to see if there is an option to make that off.
For the individual product pages, you can try adding this CSS to your Custom CSS/ Additional CSS to see if that helps.
.woocommerce .products li { width: 50% !important; }
Hope that helps.
Thank you.
Hello @endrokust,
All the above codes may not work for you because of the different themes which is having different codings.
You can try adding this CSS to your Custom CSS/ Additional CSS to see if that fixes the issue for you.
@media screen and (max-width: 767px){ .products li { width: 50% !important; }}
Hope that helps.
Thank you.
Hi @soumendra
Wow amazing, that was work!
thank you so much
I’ve spent my whole of day to find out the solution
and you save my life
once again, thank you so muchHello @endrokust,
Can you also help me with the correct coding to make the home page and all product pages show products in 2 columns (in mobile view):
https://flyingwestern.comThanks a lot!
Hello @flyingwestern,
You can try adding this CSS to your Custom CSS/ Additional CSS for adjusting that:
@media screen and (max-width: 479px){ .woocommerce-page ul.products li.product:nth-child(n) { width: 45.25% !important; margin: 0 2% 0 !important; }}
Hope that helps.
Thank you.
Thanks for your help, you are awesome. Your code resolved my problem, just my product slider not showing properly please help me.
Thanks a lot…!!!
Hi @soumendra,
I tried some settings for the slider on homepage but none of working.
please help me out.Thanks.
Hello @flyingwestern,
For product slider, you can try adding this CSS to your Custom CSS/Additional CSS:
.porto-products.wpb_content_element .slider-wrapper { max-width: 200px !important; margin: auto !important; }
Feel free to ask if you need anything else.
Thank you.
- The topic ‘2 products per row on mobile !!’ is closed to new replies.