We are using Grammarly to help us writing this article

How to Create Responsive Layout using Media Queries - CSS3

by Didin J. on Dec 29, 2016 How to Create Responsive Layout using Media Queries - CSS3

How to Create Responsive Layout using Media Queries using CSS3 that fits all screen size of desktop, mobile phone and tablet.

How to Create Responsive Layout using Media Queries using CSS3? previously we have created a basic layout using CSS3. Now, we are creating the responsive layout for various mobile phone, tablet and desktop using media queries.

Take a look at this example of a full desktop layout with screen resolution 1440x720 pixels.

Full Desktop Layout

And see what happened when screen size decreases to 800x600 pixels.

Small Desktop Layout

Yes, you are right. This layout has too many lost in every dimension. This is why we will using media queries to make different layout base on screen width.


1. Desktop with Low Resolution (800 pixels width)

For desktop with low resolution 800x600 pixels, just add new lines in current css file.

@media (max-width: 800px){
  body{
    width:780px;
    margin:15px auto;
  }
}

Now, it looks better like this.

Responsive Small Desktop


2. Phone and Tablet with Portrait Orientation on High Resolution (414 pixels width)

For phone and tablet with high resolution on portrait orientation, just add this lines.

@media (max-width: 414px){
  body{
    width:100%;
    margin:15px auto;
  }

  header#page-header nav ul li {
    display: block;
  }

  section#main-section, section#rightnav-section {
    width: 94%;
    margin: 2%;
  }
}

This code will change nav button arrange vertically and right navigation will move to bottom after the main section.

High Res Mobile

3. Phone and Tablet with Portrait Orientation on Low-Resolution width (320 pixels width)

Last, for low-resolution phone and tablet with portrait orientation. We will arrange all section vertically.

@media (max-width: 320px){
  body{
    width:100%;
    margin:15px auto;
  }

  header#page-header nav ul li {
    display: block;
  }

  section#main-section, section#rightnav-section {
    width: 94%;
    margin: 2%;
  }

  section#main-section article aside {
    display: block;
    width: 100%;
  }
}

And here the result on the screen.

Low Res Mobile

What do you think? Is that too easy?

Thank You

The following resources might be useful for you:

Loading…