How to create a responsive website that will work on all devices, PC, laptop, tablet, and phone?


A responsive website works on every device whether it’s a desktop, tablet or a mobile. To set the responsiveness, we use Media Queries.

Create the header container

Create a div for the headerL

<div class="header">
   <h1>Website ↶</h1>
</div>

Style the header

Align the header text in the center using the text-align property −

.header {
   padding: 80px;	
   text-align: center;
   background: #7b1abc;
   color: white;
}

Create the navigation menu

The <nav> is used to create the navigation menu −

<nav>
   <a class="links selected" href="#"> Home</a>
   <a class="links" href="#"> Login</a>
   <a class="links" href="#"> Register</a>
   <a class="links" href="#"> Contact Us</a>
   <a class="links" href="#">More Info</a>
</nav>

Create the body content

Use the <main> and place the text you want to appear on the website −

<main>
   <h2>Sample Heading</h2>
   <h5>Published in January</h5>
   <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, autem.
   </p>
   <br />
   <h2>Sample Heading</h2>
   <h5>Published in march</h5>
   <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde quo minus fugiat tempora quae ratione dignissimos exercitationem voluptate officiis reiciendis.
   </p>
</main>

Create the Footer

The footer is a sector placed in the bottom. The copyright text can also be seen on the footer −

<div class="footer">
   <h2>Footer ↷</h2>
</div>

Style the footer

Align the footer text in the center using the text-align property with the value center −

.footer {
   padding: 20px;
   text-align: center;
   color: white;
   background: rgb(255, 0, 0);
}

Set the responsiveness

Media Queries are used to set the responsiveness. The width is set to 100% when the screen size is less than 830px. Also, the links are set with the display property block value −

@media screen and (max-width: 830px) {
   div, main {
      width: 100%;
      text-align: center;
   }
   .links {
      display: block;
   }

Example

To create a responsive website that will work on all devices, the code is as follows −

<!DOCTYPE html>
<html>
<head>
   <title>Page Title</title>
   <style>
      * {
         box-sizing: border-box;
      }
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
         margin: 0;
      }
      .header {
         padding: 80px;	
         text-align: center;
         background: #7b1abc;
         color: white;
      }
      .header h1 {
         font-size: 40px;
      }
      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);
      }
      .selected {
         background-color: rgb(0, 18, 43);
      }
      main {
         background-color: white;
         padding: 20px;
      }
      .footer {
         padding: 20px;
         text-align: center;
         color: white;
         background: rgb(255, 0, 0);
      }
      @media screen and (max-width: 830px) {
         div, main {
            width: 100%;
            text-align: center;
         }
         .links {
            display: block;
         }
      }
   </style>
</head>
<body>
   <div class="header">
      <h1>Website ↶</h1>
   </div>
   <nav>
      <a class="links selected" href="#"> Home</a>
      <a class="links" href="#"> Login</a>
      <a class="links" href="#"> Register</a>
      <a class="links" href="#"> Contact Us</a>
      <a class="links" href="#">More Info</a>
   </nav>
   <main>
      <h2>Sample Heading</h2>
      <h5>Published in January</h5>
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, autem.
      </p>
      <br />
      <h2>Sample Heading</h2>
      <h5>Published in march</h5>
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde quo minus fugiat tempora quae ratione dignissimos exercitationem voluptate officiis reiciendis.
      </p>
   </main>
   <div class="footer">
      <h2>Footer ↷</h2>
   </div>
</body>
</html>

Updated on: 14-Dec-2023

683 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements