Responsive Web Layout

In this tutorial, we'll create a responsive web layout that adapts to different screen sizes using CSS media queries.

HTML Structure

The HTML structure contains three div elements with some sample text:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="responsive.css">
</head>
<body>
    <div class="box1">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, esse
          assumenda! Modi deserunt eligendi voluptatibus explicabo pariatur.
          Culpa harum quo ea alias quos magnam excepturi, quis porro, quidem
          officia quam!
        </p>
      </div>
      <div class="box2">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quis
          sed iure incidunt nesciunt adipisci aliquid asperiores, rerum, amet at
          dolor laborum magnam aut voluptatibus facere voluptatem pariatur
          eligendi obcaecati!
        </p>
      </div>
      <div class="box3">
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum soluta
          cupiditate ratione quod dolores cumque perspiciatis asperiores!
          Maiores accusamus dolore corporis rem totam, velit unde,
          exercitationem, qui impedit ipsam sed?
        </p>
      </div>
</body>
</html>

Run Code

CSS Code

The CSS defines styles for the layout, including responsive adjustments using media queries:


.box1,.box2,.box3{
  width: 33.33%;
  height: 300px;
  float:left;
  }
.box1{
  background-color:aqua;
  }
.box2{
  background-color: rgb(109, 109, 212);
  }
.box3{
  background-color: rgb(210, 60, 123);
  }

/* tab screen */
@media (max-width:768px){

    .box1,.box2{
           width: 50%;
      }
    .box3{
           width:100%;}
      }

/* mobile screen */
@media (max-width: 460px){

    .box1,.box2{ 
        width:100%;
      } 
}

Run Code

Responsive Behavior

1. Desktop View

In the default view (screen width above 768px), the three boxes take up 33.33% of the container width, creating a three-column layout.

2. Tablet View

When the screen width is below 768px, the first two boxes take up 50% of the width, creating a two-column layout. The third box spans the full width of the container.

3. Mobile View

When the screen width is below 460px, all boxes span 100% of the container width, creating a single-column layout.

How It Works

Float Layout: The float property is used to position the boxes side by side.
Width Adjustments: The width of each box changes based on screen size using CSS media queries.
Media Queries: The @media rules specify styles for different screen widths to make the layout responsive.

Conclusion

Using float and media queries, we created a responsive layout that adapts to desktop, tablet, and mobile screens. For modern web designs, consider using Flexbox or Grid Layout for more flexibility and ease of maintenance.

Previous Next