How to achieve two column on mobile

[sunny]

Please how can I achieve two column view on mobile for woocommerce shop page like this http://prntscr.com/gvwlmu or any other page like this https://prnt.sc/gvwgmc

I have added the following css which is working well for others but fail with Kleo theme. I don’t like the big image on product list on mobile I want two column instead.  Kindly guide me how to achieve this.

I have tested the scc in child theme scc style and also in Kleo general quick scc box on the theme option page. All fails.

@media (max-width: 479px) {
.et_pb_column .woocommerce ul.products li.product:nth-child(n), .woocommerce-page ul.products li.product:nth-child(n), .et_gallery_item:nth-child(n) {
width: 48% !important;
}
}
@media only screen and ( max-width: 480px ) {
.woocommerce-page .woocommerce ul.products li.product:nth-child(n) {
margin-right: 5px !important;
margin-top: 5px !important;
margin-bottom: 5px !important;
}
}
@media (max-width: 479px){
.et_pb_row_fullwidth.custom-fullwidth-row {
width: 100% !important;
max-width: 100% !important;
margin: 0;
}
.custom-fullwidth-row .woocommerce {
padding: 0 5px 0 5px !important;
}}

[Laura]

Hello, for which page? Also ido not see any menu
Let me know 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts