Author: M Abo Bakar Aslam

Responsive Web Designing

Responsive web design is an approach to building websites that automatically adjust their layout, content, and elements according to different screen sizes and devices, ensuring a consistent and user-friendly experience across desktops, tablets, and mobile phones. It uses flexible layouts, media queries, and fluid images to make web pages adaptable and visually appealing on all devices.

1. Role Define in Header Section

Must write below line in <header> tag in your website. This is called viewport meta tag. It is used to control the width and scaling of the viewport on mobile devices. It's an important part of ensuring a responsive design.

<meta name="viewport" content="width=device-width, initial-scale=1.0" >

Example Code 1: Here, we displayed some text using heading and paragraph tag. And then apply some properties to these HTML content using external CSS. There are two files. One is myFile.html and second is myStyle.css.

We used media queries, to specify different background-color for different sizes of different devices.
The color is lightblue, if device's screen size is either of 600px or less than 600px.
The color is lightgreen, if device's screen size is either of 601px or greater than 601px.

<!--File: myFile.html-->
<header>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <link rel="stylesheet" href="myStyle.css" />
</header>
  
<div class="App">
    <p>Responsive Design Example</p>
    <p>Change the background color based on screen width</p>
</div>

    /* File: myStyle.css */
/* Common styles for all screen sizes */
.App {
    color: black;
    padding: 5px;
}
/* Responsive styles for smaller screens */
@media (max-width: 600px) {
    .App {
        background-color: lightblue;
    }
}
/* Responsive styles for larger screens */
@media (min-width: 601px) {
    .App {
        background-color: lightgreen;
    }
}

Output

Output for Screen Less Than 600px

Responsive Design Example

Change the background color based on screen width

Output for Screen Greater Than or equal to 601px

Responsive Design Example

Change the background color based on screen width

2. Possible Screen Sizzes

You may select smallest screen size as 300px wider.

There are following some media queries that may fit for all screen sizes. You can test your design by using these media queries. But it is noted that these media queries are not fixed/standard and you can change/use them according to your requirements.

/* Media Queries */
@media (min-width: 1200px) { /* Extra Large (XL) - Large Desktops and Monitors */ }
@media (min-width: 992px) and (max-width: 1199px) { /* Large (LG) - Larger Laptops and Desktops  */ }
@media (min-width: 768px) and (max-width: 991px) { /* Medium (MD) - Small Laptops and Tablets in Landscape */ }
@media (min-width: 576px) and (max-width: 767px) { /* Small (SM) - Tablets */ }
@media (max-width: 575px) { /* Extra Small (XS) - Mobile Phones */ }

Example Code 2: Here, we just increase media queries related to all possible device’s sizes. It is not fixed. You can either decrease or increase according to your requirements.

Here, we just write myStyle.css file that is applicable on same myFile.html file, you saw in previous example.

/* File: myStyle.css */
/* Common styles for all screen sizes */
.App {
    color: black;
    padding: 5px;
}
/* Media Queries */
@media (min-width: 1200px) { /* Extra Large (XL) - Large Desktops and Monitors */
    .App {
        background-color: lightblue;
    }
}
@media (min-width: 992px) and (max-width: 1199px) { /* Large (LG) - Larger Laptops and Desktops  */
    .App {
        background-color: lightgreen;
    }
}
@media (min-width: 768px) and (max-width: 991px) { /* Medium (MD) - Small Laptops and Tablets in Landscape */
    .App {
        background-color: lightcoral;
    }
}
@media (min-width: 576px) and (max-width: 767px) { /* Small (SM) - Tablets */
    .App {
        background-color: red;
    }
}
@media (max-width: 575px) { /* Extra Small (XS) - Mobile Phones */
    .App {
        background-color: rebeccapurple;
    }
}

Output

Output for Screen less than 575px

Responsive Design Example

Change the background color based on screen width

Output for Screen from 576px to 767px

Responsive Design Example

Change the background color based on screen width

Output for Screen from 768px to 991px

Responsive Design Example

Change the background color based on screen width

Output for Screen from 992px to 1199px

Responsive Design Example

Change the background color based on screen width

Output for Screen more than 1200px

Responsive Design Example

Change the background color based on screen width

Example Code 3: Here, we displayed three block elements (having classes as skills, projects and hobbies) within a main container as contentContainer

We changed width of containers depending upon screen's size.
We used some common properties for all containers and some properties are specified to each container.
Output: All blocks will be displayed vertically, one after other (Top, middle and bottom).

<!--File: myFile.html-->
<header>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <link rel="stylesheet" href="myStyle.css" />
</header>
  
<div class="contentContainer">
    <div class="skills">Skills</div>
    <div class="projects">Projects</div>
    <div class="hobbies">Hobbies</div>
</div>

    /* File: myStyle.css */
/* Common styles for all screen sizes */
.skills, .projects, .hobbies {
    padding: 20px;
    text-align: center;
    border: 1px solid #000;
}
.skills {
    background-color: lightcoral;
    color: white;
}
.projects {
    background-color: lightseagreen;
    color: white;
}
.hobbies {
    background-color: lightblue;
    color: white;
}
/* Responsive styles for small devices (100% width for all) */
@media (max-width: 600px) {
    .projects, .hobbies, .skills {
        width: 100%;
    }
}
/* Responsive styles for large devices (25% - 25% - 50% width) */
@media (min-width: 601px) {
    .skills, .projects {
        width: 25%;
    }
    .hobbies {
        width: 50%;
    }
}

Output

Output for Screen less than 600px

Skills

Projects

Hobbies

Output for Screen greater than or equal to 601px

Skills

Projects

Hobbies

Example Code 4: This example is same as above, but all containers would be displayed in one line. Therefore, we wrote code for only CSS file.

We just used flex for main container. Almost all remaining code is same as you learnt in previous example. If you remove both lines 4 and 5, then all containers would be displayed vertically as you saw in previous example. When screen’s size will lie in category of max-width: 600px, then each item would not displayed vertically (as you noticed in **Example Code 3). If you want to display vertically, then learn next example. myFile.html file is same as used in previous example.

    /* File: myStyle.css */
/* Common styles for all screen sizes */
.contentContainer {
    display: flex;
    justify-content: space-between;
    text-align: center;
    border: 1px solid #000;  
}
.skills, .projects, .hobbies {
    color: white;
}
/* Distinct styles*/
.skills {
    background-color: lightcoral;
}
.projects {
    background-color: lightseagreen;
}
.hobbies { 
    background-color: lightblue;
}
  
/* Responsive styles based on screen size */
@media (min-width: 801px) {
    .skills, .projects, .hobbies {
        width: 25%;
    }
}
@media (min-width: 601px) and (max-width: 800px) {
    .skills, .projects, .hobbies {
        width: 20%;
    }
}
@media (max-width: 600px) {
    .skills, .projects, .hobbies {
        width: 100%;
    }
}

Output

Output for Screen less than 600px

Skills

Projects

Hobbies

Output for Screen from 601px to 800px

Skills

Projects

Hobbies

Output for Screen more than 801px

Skills

Projects

Hobbies

Example Code 5: The flex container will always display its items in a row, until you use flex-direction with column as value. In previous example, when screen’s size will lie in category of max-width:** 600px, then each item would not displayed vertically (as you notices in Example Code 3).

All lines are same as Example Code 4, buts lines 40-42 are additional lines. myFile.html file is same as used in previous example.

/* File: myStyle.css */
/* Common styles for all screen sizes */
.contentContainer {
    display: flex;
    justify-content: space-between;
    text-align: center;
    border: 1px solid #000;  
}
.skills, .projects, .hobbies {
    color: white;
}
/* Distinct styles*/
.skills {
    background-color: lightcoral;
}
.projects {
    background-color: lightseagreen;
}
.hobbies { 
    background-color: lightblue;
}
  
/* Responsive styles based on screen size */
@media (min-width: 801px) {
    .skills, .projects, .hobbies {
        width: 25%;
    }
}
@media (min-width: 601px) and (max-width: 800px) {
    .skills, .projects, .hobbies {
        width: 20%;
    }
}
@media (max-width: 600px) {
    .skills, .projects, .hobbies {
        width: 100%;
    }
    .contentContainer{
        flex-direction: column;
    }
}

Output

Output for Screen less than 600px

Skills

Projects

Hobbies

Output for Screen from 601px to 800px

Skills

Projects

Hobbies

Output for Screen more than 801px

Skills

Projects

Hobbies

Example Code 6: In case of large devices, if you want to display all container’s items as they defined in HTML file, but change the sequence of container’s items for different sizes of devices, then you will be needed of “order” property of flex.

If you don’t use flex, then order property wouldn’t work because order is property of flex. If you don’t specify order’s value for any item, then it would be displayed first. Notice media query for screen’s ranges as (min-width: 601px) and (max-width: 800px). myFile.html file is same as used in previous example.

    /* File: myStyle.css */
/* Common styles for all screen sizes */
.contentContainer {
  display: flex;
  justify-content: space-between;
  text-align: center;
  border: 1px solid #000;  
}
.skills, .projects, .hobbies {
  color: white;
}
/* Distinct styles*/
.skills {
  background-color: lightcoral;
}
.projects {
  background-color: lightseagreen;
}
.hobbies { 
  background-color: lightblue;
}
  
/* Responsive styles based on screen size */
@media (min-width: 801px) {
  .skills, .projects, .hobbies {
    width: 25%;
  }
}
@media (min-width: 601px) and (max-width: 800px) {
  .skills, .projects, .hobbies {
    width: 20%;
  }
  .skills{
    order: 2;
  }
  .hobbies{
    order: 1;
  }
}
@media (max-width: 600px) {
  .skills, .projects, .hobbies {
    width: 100%;
  }
  .contentContainer{
    flex-direction: column;
  }
  .skills{
    order: 3;
  }
  .projects{
    order: 2;
  }
  .hobbies{
    order: 1;
  }
}

Output

Output for Screen less than 600px

Hobbies

Projects

Skills

Output for Screen from 601px to 800px

Projects

Hobbies

Skills

Output for Screen more than 801px

Skills

Projects

Hobbies