Make site responsive

In this article, you will know the things required to make the site responsive. This site can be viewed on mobile, tablet or on computer screen with ease.

You should design according to the target audience. If you have a mobile audience, make the site for mobile and then add conditionals for desktop and tablet users. This can be done using media queries.

Media Queries

Media queries are used to show the content according to the viewport size. Viewport is the area visible to the audience. You can redefine your elements for different sizes. For example,

If the device width is less than 250px, then you can redefine the value of the elements as

@media(max-width: 250px){
/*enter CSS here*/
}

So, if the width is less than 250px, the above rules will govern the elements. If the width is more than 250px, than those elements will be overwritten.

Similar can be written for height

@media(min-height: 300px){
/*enter CSS here*/
}

HTML and CSS Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8" />
    <meta name = "viewport" 
     content = "width = device-width,initial-scale=1.0"/>
    <meta http-equiv = "X-UA-Compatible" content ="ie=edge" />
    <title>Margin and Padding</title>
    <style>
    div{
      border: 5px solid black;
      text-align:center;
    }
    .box1{
      background-color:yellowgreen;
      padding:30px;
    }
    .box2{
      background-color:aliceblue;
      padding:30px;
      margin:20px;
    }
    .box3{
      background-color:#069;
      padding:30px;
      margin:20px;
    }
    @media(max-width:300px){
      .box3{
        background-color:#f00;
      }
      .box2{
        background-color:#0f0;
      }
    }
    </style>
  </head>
  <body>
    <div class="box1">
      Box 1
    <div class="box2">
      Box 2
    </div>
    <div class="box3">
      Box 3
    </div>
    </div>
  </body>
</html>

So, when the width is less than or equal to 300px, the color of the boxes changes.

image 1 - width 350px
image 1 – width 350px
 image 2 - width 300px
image 2 – width 300px

Image Responsive

Images can be made responsive using these two properties

  • width : 100%;
  • height : auto;

This makes the image to occupy 100% width and the height to auto takes care of the aspect ratio.

Responsive Typography

To make typography responsive, we use viewport units. The four dimensions are

  • vw (viewport width)
  • vh (viewport height)
  • vmax (viewport maximum)
  • vmin (viewport minumum)

vw is the percentage of viewport width.

vh is the percentage of viewport height.

vmax is the percentage of viewport bigger dimension.

vmin is the percentage of viewport smaller dimension.

Leave a Reply

Your email address will not be published. Required fields are marked *