Title: Current CSS grid system
Last modified: March 31, 2020

---

# Current CSS grid system

 *  Resolved [tabatha.j22](https://wordpress.org/support/users/tabathaj22/)
 * (@tabathaj22)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/current-css-grid-system/)
 * Hello. I hope you’re doing well.
 * We updated from version 3.x to the latest and are having an issue with the layout
   using the themes previous grid.
 * We coded pages and elements using the old grid system by following this…
    [https://demos.cyberchimps.com/responsivepro/responsive-grid/](https://demos.cyberchimps.com/responsivepro/responsive-grid/)
 * We noticed that the classes changed, so we updated the layout classes using the
   new parent CSS file. Unfortunately, we are unable to get the layout sorted using
   them.
 * Would it be possible to have an example page like before with the new grid classes
   like you has before here…
    [https://demos.cyberchimps.com/responsivepro/responsive-grid/](https://demos.cyberchimps.com/responsivepro/responsive-grid/)
 * That would be so helpful. Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Theme Author [CyberChimps](https://wordpress.org/support/users/cyberchimps/)
 * (@cyberchimps)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/current-css-grid-system/#post-12612682)
 * [@tabathaj22](https://wordpress.org/support/users/tabathaj22/)
    Unfortunately,
   It is not possible to display the pages and elements using the old grid system
   in the latest Responsive theme.
 * We recommend designing the page templates using Elementor to showcase the pages
   and elements like the old grid system.
 * Thank you.
 *  Thread Starter [tabatha.j22](https://wordpress.org/support/users/tabathaj22/)
 * (@tabathaj22)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/current-css-grid-system/#post-12618379)
 * Hello. I should have made my question clearer.
 * We have been using the new grid system but they lack responsiveness.
 * Here’s one example that we used using the new themes classes…
 *     ```
       <div class="row">
   
       <div class="col-md-4">Third</div>
       <div class="col-md-4">Third</div>
       <div class="col-md-4">Third</div>
   
       </div>
       ```
   
 * They sit side by side on large devices, however they don’t stack on top of each
   other for medium devices because the responsive media queries for these new classes
   are the same for every break point.
 * The CSS style for .col-md-4 is:
 * .col-md-4
    {padding-left: 15px; padding-right: 15px; width: 33.3333333333%; }
 * However, you have the responsive media query break point the same for all the
   break points:
 *     ```
       @media (min-width: 768px) {
         .col-md-4 {
           padding-left: 15px;
           padding-right: 15px;
           width: 33.3333333333%;
         }
       ```
   
 *  Theme Author [CyberChimps](https://wordpress.org/support/users/cyberchimps/)
 * (@cyberchimps)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/current-css-grid-system/#post-12623122)
 * [@tabathaj22](https://wordpress.org/support/users/tabathaj22/)
 * To sit the div side by side on large devices, and to stack on top of each other
   for medium devices and small devices, please use classes like
 * <div class=”row”>
 * <div class=”col-xs-12 col-lg-4″>Third</div>
    <div class=”col-xs-12 col-lg-4″>
   Third</div> <div class=”col-xs-12 col-lg-4″>Third</div>
 * </div>
 * here, xs is for when min-width is 0px
    here lg is for when min width is 992px
 * similarly, we have classes for
 * sm is for when min width is 576px
    md is for when min width is 768px xl is for
   when min width is 1200px xxl is for when min width is 2400px
 * and number 1-12 defines the width taken by class
    12 = 100% and 6 = 50%
 * basically (12 / n) * 100%
 * Thank you.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Current CSS grid system’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/responsive/6.3.7/screenshot.png)
 * Responsive
 * [Support Threads](https://wordpress.org/support/theme/responsive/)
 * [Active Topics](https://wordpress.org/support/theme/responsive/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/responsive/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/responsive/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [CyberChimps](https://wordpress.org/support/users/cyberchimps/)
 * Last activity: [6 years, 1 month ago](https://wordpress.org/support/topic/current-css-grid-system/#post-12623122)
 * Status: resolved