Development

Make your Website Responsive for Mobile using Media Queries

We love Media Queries! Why? Because they are the core for creating beautifully smooth responsive websites! Not sure how they work?
We’ll explain them for you now

Media Queries

A Media Query is a bit of code you put at the bottom of your CSS to tell your site to only use certain css when between set widths. These widths are set by the Media Query. They can be as simple as stating CSS over a certain width, or slightly more complex and state CSS that can only take effect when the screen width is above a certain amount and below another amount, eg. (min-width:34.063em) and (max-width:54.063em)

Here’s what the code looks like:
@media screen and (min-width:34.063em) {
  /*YOUR CSS STYLING GOES IN HERE*/
}

So for example, say you would like your paragraph text to be blue for mobile but red for all other larger devices?
Simple. So you have your css state ‘p {color:blue;}’ and then create a media query that has a minimum width of 34.063em, and add the css ‘p {color:red;}’.

The code would look like this:
p {
  color: blue;
}
@media screen and (min-width:34.063em) {
  p {
  color: red;
  }
}

Not as difficult as you thought right?
It’s best practice to design ‘mobile-first’. Meaning write your css for mobile, then add media queries to tell your css what to do for tablet and then desktop.
You won’t be alone if you find coding in reverse easier and designing ‘desktop first’ and then adding media queries for mobile with max widths instead.
However this isn’t best practice as mobile becomes a second thought. With mobile use growing and home computers on the decline it’s important to try and stay up-to-date and code in the direction the industry is going.

June 24, 2015  |  07:17:05

Leave a Reply

Your email address will not be published.