woocommerce - Grid Responsive Section in Divi-Wordpress

Question

I have 6 columns in a section. in desktop version its fine (all in one row), in tablet (3x3) but when its in mobile version why its showing a single column in a single row, I want it to be (3x3)or(2x3) and not (1x6)..Please help me with this.

Thanks in advance.

question from:https://stackoverflow.com/questions/65623647/grid-responsive-section-in-divi-wordpress

Answer 1

1. Add a class to the section (Advanced -> CSS ID & Classes). Call it my-section (or whatever you want)

2. Add this CSS code to Appearance -> Customize -> Additional CSS:

@media only screen and (max-width: 479px) {
    .my-section .et_pb_column {
    width: 50%!important;
}
}