Responsive Layout using Flexbox in HTML & CSS

HTML / CSS Flex

Aaj hum ek responsive layout banayenge jo text aur image ko side-by-side dikhata hai desktop screen par, aur mobile par stack ho jata hai. Yeh layout banane ke liye hum HTML + CSS Flexbox aur media queries ka use karenge.

📄 HTML Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Layout</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="content">
        <h1>Welcome to Our Website</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <p>
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="image-container">
        <img src="https://via.placeholder.com/600x400" alt="Sample Image" />
      </div>
    </div>
  </body>
</html>

Global Reset and Defaults

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

• * → universal selector (applies to all elements).
• margin: 0; → removes default browser margin.
• padding: 0; → removes default padding.
• box-sizing: border-box; → includes padding & border inside the element’s width/height (helps with consistent sizing).

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f4f4f4;
}

• font-family: Arial, sans-serif; → sets the text font to Arial or fallback to sans-serif.
• line-height: 1.6; → increases readability by giving space between lines.
• background-color: #f4f4f4; → light gray background for the entire page.

Container Layout

.container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  gap: 20px;
}

• display: flex; → makes .container a flexbox.
• flex-wrap: wrap; → allows items to wrap onto the next line if space runs out.
• max-width: 1200px; → limits the container’s width.
• margin: 0 auto; → centers the container horizontally.
• padding: 20px; → space inside container.
• gap: 20px; → space between child elements.

Content Section

.content {
  flex: 1;
  min-width: 300px;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

• flex: 1; → makes content expand equally with image container.
• min-width: 300px; → ensures it never shrinks below 300px.
• padding: 20px; → space inside box.
• background-color: white; → white card-style background.
• border-radius: 8px; → smooth rounded corners.
• box-shadow: 0 2px 4px rgba(0,0,0,0.1); → subtle shadow for depth.

.content h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #333;
}

• font-size: 2rem; → large heading text (2 × root font size).
• margin-bottom: 1rem; → space below heading.
• color: #333; → dark gray text color.

.content p {
  margin-bottom: 1rem;
  color: #666;
}

• margin-bottom: 1rem; → spacing between paragraphs.
• color: #666; → medium gray for readability.

Image Section

.image-container {
  flex: 1;
  min-width: 300px;
}

• flex: 1; → expands equally with content box.
• min-width: 300px; → ensures images don’t shrink too small.

.image-container img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

• width: 100%; → image fills the container width.
• height: auto; → keeps aspect ratio.
• border-radius: 8px; → rounded corners for image.
• object-fit: cover; → ensures image covers its area without stretching.
• display: block; → removes inline spacing issues.

Responsive Design (Mobile Screens)

@media (max-width: 768px) {
  .container {
    flex-direction: column;
    padding: 10px;
  }

  .content,
  .image-container {
    min-width: 100%;
  }
}

• @media (max-width: 768px) → applies these styles only on screens ≤ 768px wide (tablets & mobiles).
• .container { flex-direction: column; } → instead of side-by-side, stacks items vertically.
• padding: 10px; → smaller padding for small screens.
• .content, .image-container { min-width: 100%; } → makes both take full width.

✅ Summary: This CSS builds a responsive 2-column layout where text and an image sit side by side on larger screens, and stack vertically on smaller screens. It uses flexbox, shadows, padding, and media queries for responsiveness.