So far, we've talked about some important things like overriding default classes and using Bootstrap's grid system. In this guide, we're going to talk about responsiveness.

Bootstrap has a built-in class called "media" that allows us to build responsive websites. Also known as media query, this is what allows us to use different styles for different screen sizes. If you saw many different elements on the webpage, it was to customize them for different gadgets.

/* Mobile screens ------------- */
@media only screen and (max-width: 600px) {
  .btn-default {
    padding: 11px 15px;
  }

  #heading .avatar {
    width: 60%;
  }

  #header {
    padding-left: 20px;
    padding-right: 20px;
  }

  #header .avatar {
    overflow: hidden;
    width: 70px;
  }

If you look at this code, what it essentially says is these styles should be applied only when the media screen has a max-width of 600px or less, which translates to mostly mobile screens. Note that the keyword here is @media.

See the changes here. For example, the avatar size is shrunk to 60%, and our header image is only 120px. Another change is the article-grid class.

<div class="article-grid">
div.article-grid {
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
}

div.article-grid .filter-sort {
  display: block;
  margin-bottom: 30px;
}

div.article-grid .filter-sort .options {
  width: 100%;
}

If you search for it in the index.html file, you can see that we've used it here:

<div class="container">
  <div class="row">
    <div class="col-xs-9 article-grid pull-left">
      <a href="#accept-article" class="btn btn-default btn-charcoal pull-left"><span>Submit Article</span></a>
      <ul class="filter pull-right">
        <li>Top Now</li>
        <li>Most Recent</li>
        <li class="active">Today</li>
        <li>This Week</li>
        <li>All Time</li>
      </ul>

In a normal screen, our article took up only nine columns, but for mobile screens, it occupies the entire area. Still, there's a padding of 30px on both the right and left side just to make it look nice.

If you shrink the webpage on the browser to fit a mobile screen, you'll see that the articles occupy the entire space, and this is really cool!

So, that's how a media query works for mobile screens.

0Next, let's see how it's implemented for tablets.

/* Tablet screens ------------ */
@media only screen and (min-width: 600px) and (max-width: 786) {
  #header {
    padding-left: 20px;
    padding-right: 20px;
  }

If you see, these styles are applicable only for screens that have a minimum width of 600px and a maximum of 768px.
If the screen is less than 600px, then the styles for mobile screens would apply. Here, the styles only have a slight change. The avatar, for example, is shrunk to 45% as opposed to 60% in mobile screens. I'd suggest you go through this code to get a feel for it.

Next, we'll see how the styles have changed for desktop screens that have a width of 768px to 1024px. The avatar here is only 35%.

/* Desktop screens ------------ */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

  /* Common */

  #header .avatar {
    width: 35%;
  }

  /* Home */

  div.article-grid div.vertical {
    width: 46%;
  }

Finally, we can use @media to customize it for large screens, like this:

/* Large screens ------------ */
@media only screen and (min-width: 1024px) and (max-width: 1224px) {

  /* Common */
  #header .avatar {
    width: 30%;
  }

div.article -grid div.vertical {
  width: 47.5%;
}

div.login .mobile img,
div.order .mobile img,
div.login .mobile img {
  width: 30%;
}

div.billing .author {
  display: block;
  right: -250px;
}

Though the maximum width is set to 1224px, it doesn't mean the site won't work for larger screens. If you have to display your webpage on a really huge screen, you can modify the screen size for that too. If you see, the number of style changes is lesser than other screen sizes because there are not many changes you'll need to make here.

So, that's how you can use media queries to make your webpage more responsive.