Tyler Knapp

POWERFUL Media Queries

August 18, 2019

CSS

CSS is tricky. In an industry that is always changing, it’s hard to keep up with trends and standards especially when it comes to styling. Today I wanted to discuss Media Queries and how important they are for web development.

Mobile traffic is responsible for 52.2 percent of Internet traffic in 2018 — compared to 50.3 percent from 2017.

This means that the websites we build need just as much, if not more, emphasis on a mobile friendly design. This may seem like a daunting task, but there are some helpful tools and frameworks out there to make your life a lot easier.

Media Queries

Media queries give us a very powerful way to adjust our styles according to factors like the type of device used, the viewport size, the screen’s pixel density, or even the device orientation. Think of Media Queries as a conditional way to apply styling. Let’s take a look at some examples.

CSS

Here we have an example of four cards split up on a page, set in a horizontal row. Tyler Knvpp’s Codepen

<div class="container">
  <div class="card">
    <h1>Hello</h1>
  </div>
  <div class="card">
    <h1>Hello</h1>
  </div>
  <div class="card">
    <h1>Hello</h1>
  </div>
  <div class="card">
    <h1>Hello</h1>
  </div>
</div>
.card {
  background-color: #25aae1;
  margin-left: auto;
  margin-right: auto;
  padding: 5em;
}

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

Watch what happens when we start to scale the browser down. This is where the power of media queries comes in. Let’s add a conditional styling for when the browser size is reduced.

.card {
  background-color: #25aae1;
  margin-left: auto;
  margin-right: auto;
  padding: 5em;
}

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

@media only screen and (max-width: 1000px) {
  body {
    background-color: FireBrick;
  }
}

Now whenever the browser is 1000px or less, the background will be turned FireBrick red. Let’s try something more useful.

.card {
  background-color: #25aae1;
  margin-left: auto;
  margin-right: auto;
  padding: 5em;
}

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

@media only screen and (max-width: 1000px) {
  .container {
    flex-direction: column;
  }
}

Nice! Now we have set the direction of the cards to form a column instead of a row, but now we need to space those cards out. Let’s add a conditional style to the cards as well, so that whenever the browser is below 1000px, there will be space in between those cards.

.card {
  background-color: #25aae1;
  margin-left: auto;
  margin-right: auto;
  padding: 5em;
}

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

@media only screen and (max-width: 1000px) {
  .container {
    flex-direction: column;
  }
  .card {
    margin-bottom: 1em;
  }
}

Tyler

Tyler is a recent graduate of Flatiron School's immersive software engineering program in New York City. You should check him out on Github.