Responsive Web Design with Media Queries in CSS


Media Queries is a CSS technique for different style rules for different size devices such as mobiles, desktops, etc. To set the responsiveness, use the Media Queries concept. Let us see how to create responsive column cards on a web page. We will see various examples for responsive web design

The screen sizes are mainly desktop, tablet, and mobile devices. Let us first set the different screen sizes i.e., where we will set the common device breakpoints.

Different screen sizes responsiveness

Let us see an example where we will set different styles for different devices and display responsiveness

The common device breakpoints are the different devices with its screen size i.e.

  • Phones - Screens less than 768px wide

  • Tablets - Screens equal to or greater than 768px wide

  • Small laptops - Screens equal to or greater than 992px wide

  • Laptops and Desktops - Screens equal to or greater than 1200px wide

Screen Size with Maximum Width 600px

When the screen size is less than 600px, the following background color is set using the background-color property −

@media only screen and (max-width: 600px) {
   body {
      background: blue;
   }
}

Screen Size with Minimum Width 600px

When the screen size is more than 600px but less than 768px, the following background color is set using the background-color property −

@media only screen and (min-width: 600px) {
   body {
      background: green;
   }
}

Screen Size with Minimum Width 768px

When the screen size is more than 768px but less than 992px, the following background color is set using the background-color property −

@media only screen and (min-width: 768px) {
   body {
      background: orange;
   }
}

Screen Size with Maximum Width 992px

When the screen size is more than 992px but less than 1200px, the following background color is set using the background-color property −

@media only screen and (min-width: 992px) {
   body {
      background: red;
   }
}

Screen Size with Maximum Width 1200px

When the screen size is more than 1200px, the following background color is set using the background-color property −

@media only screen and (min-width: 1200px) {
   body {
      background: cyan;
   }
}

Example

To use media queries for common device breakpoints using CSS, the code is as follows −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
         color: white;
      }
      @media only screen and (max-width: 600px) {
         body {
            background: blue;
         }
      }
      @media only screen and (min-width: 600px) {
         body {
            background: green;
         }
      }
      @media only screen and (min-width: 768px) {
         body {
            background: orange;
         }
      }
      @media only screen and (min-width: 992px) {
         body {
            background: red;
         }
      }
      @media only screen and (min-width: 1200px) {
         body {
            background: cyan;
         }
      }
   </style>
</head>
<body>
   <h1>Typical Breakpoints Example</h1>
   <h2>
      Resize the screen to see background color change on different breakpoints
   </h2>
</body>
</html>

Mixed column layout with responsiveness

Let us see another example where we will create a mixed column layout and also set responsiveness using the Media Queries concept.

Change the layout

When the screen size gets smaller than 900px, the width is set 50% −

@media screen and (max-width: 900px) {
   .col {
      width: 50%;
   }
}

When the screen size gets smaller than 600px, the width is 100% −

@media screen and (max-width: 600px) {
   .col {
      width: 100%;
   }
}

Example

To create a mixed column layout grid with CSS, the code is as follows −

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      * {
         box-sizing: border-box;
      }
      .col {
         color: white;
         float: left;
         width: 25%;
         padding: 10px;
      }
      .colContainer:after {
         content: "";
         display: table;
         clear: both;
      }
      @media screen and (max-width: 900px) {
         .col {
            width: 50%;
         }
      }
      @media screen and (max-width: 600px) {
         .col {
            width: 100%;
         }
      }
   </style>
</head>
<body>
   <h1>Mixed col Layout Example</h1>
   <h2>Resize the screen to see the below divs resize themselves</h2>
   <div class="colContainer">
      <div class="col" style="background-color:rgb(153, 29, 224);">
         <h2>First col</h2>
      </div>
      <div class="col" style="background-color:rgb(12, 126, 120);">
         <h2>Second col</h2>
      </div>
      <div class="col" style="background-color:rgb(207, 41, 91);">
         <h2>Third col</h2>
      </div>
      <div class="col" style="background-color:rgb(204, 91, 39);">
         <h2>Fourth col</h2>
      </div>
   </div>
</body>
</html>

Set responsive navigation menu

In this example, we will create a responsive navigation menu and also set icons for the menu. When the screen size goes down 830px, the mobile view would be visible −

@media screen and (max-width: 830px) {
.links {
   display: block;
}

Example

Here is the example −

<!DOCTYPE html>
<html lang="en" >
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
   <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"    integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
   <style>
      body {
         margin: 0px;
         margin-top: 10px;
         padding: 0px;
      }
      nav {
         width: 100%;
         background-color: rgb(39, 39, 39);
         overflow: auto;
         height: auto;
      }
      .links {
         display: inline-block;
         text-align: center;
         padding: 14px;
         color: rgb(178, 137, 253);
         text-decoration: none;
         font-size: 17px;
      }
      .links:hover {
         background-color: rgb(100, 100, 100);
      }
      input[type="text"] {
         float: right;
         padding: 6px;
         margin-top: 8px;
         margin-right: 8px;
         font-size: 17px;
      }
      .selected {
         background-color: rgb(0, 18, 43);
      }
      @media screen and (max-width: 830px) {
      .links {
         display: block;
      }
      input[type="text"] {
         display: block;
         width: 100%;
         margin: 0px;
         border-bottom: 2px solid rgb(178, 137, 253);
         text-align: center;
      }
      }
   </style>
</head>
<body>
   <nav>
      <a class="links selected" href="#">
         <i class="fa fa-fw fa-home"></i> Home
      </a>
      <a class="links" href="#">
         <i class="fa fa-fw fa-user"></i> Login
      </a>
      <a class="links" href="#">
         <i class="fa fa-user-circle-o" aria-hidden="true"></i> Register
      </a>
      <a class="links" href="#">
         <i class="fa fa-fw fa-envelope"></i> Contact Us
      </a>
      <a class="links" href="#">
         <i class="fa fa-info-circle" aria-hidden="true"></i> More Info
      </a>
      <input type="text" placeholder="Search Here.." />
   </nav>
</body>
</html>

Updated on: 26-Dec-2023

428 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements