Creating a Responsive Webpage

Having a responsive website is almost mandatory in modern web development. The way people view websites has changed. People use their phones and tablets almost more than their desktops and laptops.

CSS3 media queries allow you to apply styles based on screen size. Here is an example:

@media all and (max-width 560px){
  div#nav{
    height: 300px;
  }
  h2{
    font-size: 80%;
  }
}

This code will only execute on a screen of width 560px or less. With this you can easily fix the errors that occur on the mobile view without affecting your website on devices with a width larger than 560px. You can drag your browser’s width to match your query and you’ll see the code execute.

Using these tools, anyone who knows CSS3 can make a responsive website!