The website shop is shown in tablet and desktop properly, but It has only 1 column in mobile. I don't know how to change to 2 columns shop in mobile. Regards. PS. tanyahan.co
Try to add this CSS at Divi -> Theme Options -> Custom CSS: Code: @media screen and (max-width: 479px) { .et_gallery_item:nth-child(n), .et_pb_column .et_pb_filterable_portfolio .et_pb_portfolio_item.et_pb_grid_item:nth-child(n), .et_pb_column .et_pb_grid_item:nth-child(n), .et_pb_column .et_pb_shop_grid .woocommerce ul.products li.product:nth-child(n), .et_pb_column .woocommerce ul.products li.product:nth-child(n), .woocommerce-page ul.products li.product:nth-child(n) { width: 45.25%!important; margin: 0 9.5% 9.5% 0!important; } .et_gallery_item:nth-child(2n), .et_pb_column .et_pb_grid_item:nth-child(2n), .et_pb_column .et_pb_shop_grid .woocommerce ul.products li.product:nth-child(2n), .et_pb_column .woocommerce ul.products li.product:nth-child(2n), .woocommerce-page ul.products li.product:nth-child(2n) { margin-right: 0!important; } }
Thank you from me too... I've been struggling for ages to get 2 columns on mobile... Worked for me too!!
Hi, does this also works for a 3 or 4 column display? I tried changing the code, but it doesn't work so far.. Can you help me? Thank you!
Try the below CSS for 3 column in mobile: Code: @media screen and (max-width: 479px) { .et_gallery_item:nth-child(n), .et_pb_column .et_pb_filterable_portfolio .et_pb_portfolio_item.et_pb_grid_item:nth-child(n), .et_pb_column .et_pb_grid_item:nth-child(n), .et_pb_column .et_pb_shop_grid .woocommerce ul.products li.product:nth-child(n), .et_pb_column .woocommerce ul.products li.product:nth-child(n), .woocommerce-page ul.products li.product:nth-child(n) { width: 29.667%!important; margin: 0 5.5% 5.5% 0!important; } .et_gallery_item:nth-child(3n), .et_pb_column .et_pb_grid_item:nth-child(3n), .et_pb_column .et_pb_shop_grid .woocommerce ul.products li.product:nth-child(3n), .et_pb_column .woocommerce ul.products li.product:nth-child(3n), .woocommerce-page ul.products li.product:nth-child(3n) { margin-right: 0!important; } .woocommerce-page ul.products li.product:nth-child(2n+1) { clear: none!important; } }
Thank you, but unfortunately it doesn't work. It still shows two columns. See www.dutchwristart.com - the colored blocks
For your case, try this instead: Code: @media screen and (max-width: 479px) { .et_gallery_item:nth-child(n), .et_pb_column .et_pb_filterable_portfolio .et_pb_portfolio_item.et_pb_grid_item:nth-child(n), .et_pb_column .et_pb_grid_item:nth-child(n), .et_pb_column .et_pb_shop_grid .woocommerce ul.products li.product:nth-child(n), .et_pb_column .woocommerce ul.products li.product:nth-child(n), .woocommerce-page ul.products li.product:nth-child(n) { width: 29.667%!important; margin: 0 5.5% 5.5% 0!important; } .et_gallery_item:nth-child(3n), .et_pb_column .et_pb_grid_item:nth-child(3n), .et_pb_column .et_pb_shop_grid .woocommerce ul.products li.product:nth-child(3n), .et_pb_column .woocommerce ul.products li.product:nth-child(3n), .woocommerce-page ul.products li.product:nth-child(3n) { margin-right: 0!important; } ul.products li.product:nth-child(2n+1) { clear: none!important; } .woocommerce ul.products[class*=columns-] li.product:nth-child(2n) { float: left!important; } #page-container ul.products li.product:nth-child(3n+1) { clear: both!important; } }
I try the two columns code, but the image display not correct, I need it in square and smaller. How to set ?
It seems like the height is set by Royal Commerce Child Theme. To fix it, you can try the below CSS in Divi > Theme Options > Custom CSS: Code: @media screen and (max-width: 479px) { #page-container .et_shop_image, #page-container .et_shop_image img { height: auto!important; min-height: 0!important; max-height: none!important; } }