12-column system is not responsive on mobile

12-column grid generator
bootstrap grid generator
12 column grid sketch
css grid
responsive grid generator
responsive grid system
bootstrap container width
responsive grid layout examples

I am trying to make a responsive 12-column grid system like Bootstrap.

The code works well on desktop when I change the browser window, but when I open the HTML file in mobile it’s not responsive. Check my CSS code for row and column (12 columnn) and help me make it perfect.

.col .row {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.row {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row .col {
  float: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 0.75rem;
  min-height: 50px;
}

.row .col.sd1 {
  width: 8.3333333333%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.sd2 {
  width: 16.6666666667%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.sd3 {
  width: 25%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.sd4 {
  width: 33.3333333333%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.sd5 {
  width: 41.6666666667%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.sd6 {
  width: 50%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.sd7 {
  width: 58.3333333333%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.sd8 {
  width: 66.6666666667%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.sd9 {
  width: 75%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.sd10 {
  width: 83.3333333333%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.sd11 {
  width: 91.6666666667%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.sd12 {
  width: 100%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.c {
  background: red;
  padding: 10px;
}

@media only screen and (min-width: 601px) {
  .row .col.md1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.md2 {
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.md3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.md4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.md5 {
    width: 41.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.md6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.md7 {
    width: 58.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.md8 {
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.md9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.md10 {
    width: 83.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.md11 {
    width: 91.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.md12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
}

@media only screen and (min-width: 993px) {
  .row .col.ld1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ld2 {
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ld3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ld4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ld5 {
    width: 41.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ld6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ld7 {
    width: 58.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ld8 {
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ld9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ld10 {
    width: 83.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ld11 {
    width: 91.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ld12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
}
<div class="row ">
  <div class="col sd12 md6 ld4">
    <div class="c"></div>
  </div>
  <div class="col sd12 md6 ld4">
    <div class="c"></div>
  </div>
  <div class="col sd12 md6 ld4">
    <div class="c"></div>
  </div>
  <div class="col sd12 md6 ld4">
    <div class="c"></div>
  </div>
  <div class="col sd12 md6 ld4">
    <div class="c"></div>
  </div>
  <div class="col sd12 md6 ld4">
    <div class="c"></div>
  </div>
  <div class="col sd12 md6 ld4">
    <div class="c"></div>
  </div>
  <div class="col sd12 md6 ld4">
    <div class="c"></div>
  </div>
</div>

Add meta tag if you don't have it already

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Grid system · Bootstrap, Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content​. the margin from rows and padding from columns with .no-gutters on the .row . Mobile First Responsive 12 Column Grid System using only HTML5 and CSS3. Watch how to create it from scratch. Hi, In this video tutorial, I'm going to show you how we can create our own rock solid


You seem to have made a very novice error in the code.

The normal Responsive designs are developed across various Screen Device, where you mention the width range of the Screen devices.

Here in your code, you have only mentioned min-width, whereas you also have to mention the max-width of the device screen, or you can simply change your min-width to max-width.

Corrected Code snippet:

.col .row {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

..
..
..

.c {
  background: red;
  padding: 10px;
}

@media only screen and (min-width: 601px) {
  .row .col.md1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  ..
  ..
  ..
  .row .col.md12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
}

@media only screen and (min-width: 993px) {
  .row .col.ld1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  ..
  ..
  ..
  .row .col.ld12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
}

Responsive Grid System, This is the Responsive Grid System, a quick, easy and flexible way to create a It plugs into your existing HTML and CSS, it will be your friend in no time. Mobile versions of the grid are already baked in, or you can cook up your own. a 3 column layout here, but the Responsive Grid System goes all the way to 12, baby! After data recovery, you can try the following steps to fix the process system isn't responding issue. Step 1: Go to Settings and scroll down to Backup and reset. Step 2: Click on Factory data reset and Reset device. Step 3: To erase all data from your device's internal storage,


Responsive layout grid, The Material Design responsive layout grid adapts to screen size and orientation. On mobile, at a breakpoint of 360 dp, this layout grid uses 4 columns. Layouts using 4-column, 8-column, and 12-column grids are available for use across values and don't need to be equal within the Material Design grid system. After entering the Recovery mode, go to the “wipe data/factory reset” option using the Volume up and down button. Use the Power button to make a selection. If you get an additional message, then select the “yes – delete all data” option. When it is done, you can simply reboot your device. Part 6: Fix process system isn't responding


Understanding and Using the 12-Column Grid, Fear not—understanding the system is fairly easy and we are with you through all stages of your design. Our use of the grid system creates a  Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. So it's not something you'll be using for mobile screens, but it's really handy if you want to code a bunch of smaller pieces in a row for bigger screens.


Understanding the Bootstrap 4 Grid System, Similarly, the .col-md-* class will not only affect the styling of elements on arises how to create rows and columns using this 12 column responsive grid system. However, on mobile phones (screen width less than 768px), the columns will Since the Bootstrap grid system is based on 12 columns, therefore to keep the  A responsive website is one that responds (or changes) based on the needs of the users and the device (mobile device in this example) that they're viewing it on. Here, text and images change from a three-column layout to a single column display. Unnecessary images are hidden so they don’t interfere or compete with the more important


Responsive Designs and CSS Custom Properties: Building a , We've just built a 12-column grid system with CSS custom properties. In other words: “If a --width-mobile variable is not declared in a given  Mobile First Responsive 12 Column Grid Template 1 using only HTML5 and CSS3. Watch how to create it using the grid system of our own. If you want the project file, please feel free to send me an