CssHow-ToBeginner · 4 min read

How to Make Website Responsive in CSS: Simple Guide

To make a website responsive in CSS, use media queries to apply different styles based on screen size, and use flexible layouts like Flexbox or Grid with relative units such as %, em, rem. Also, make images and other media scale with max-width: 100% to fit smaller screens.

📐

Syntax

Media queries let you apply CSS rules only when certain conditions are met, like screen width. The basic syntax is:

@media (condition) { ... } wraps CSS rules.
condition can be max-width, min-width, or others.
Inside the braces, write CSS that applies only when the condition is true.

css

@media (max-width: 600px) {
  /* CSS rules here apply when screen is 600px or less */
  body {
    background-color: lightblue;
  }
}

💻

Example

This example shows a simple responsive page where the layout changes on small screens. The container uses Flexbox for layout, and the media query changes the flex direction to stack items vertically on narrow screens.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Responsive Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  .container {
    display: flex;
    gap: 1rem;
    padding: 1rem;
  }
  .box {
    flex: 1;
    background-color: #4CAF50;
    color: white;
    padding: 2rem;
    text-align: center;
    border-radius: 0.5rem;
  }
  img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
  }
  @media (max-width: 600px) {
    .container {
      flex-direction: column;
    }
  }
</style>
</head>
<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">
      <img src="https://via.placeholder.com/150" alt="Placeholder Image" />
    </div>
  </div>
</body>
</html>

Output

A webpage with three green boxes side by side on wide screens; on screens 600px or less wide, the boxes stack vertically. The third box contains a responsive image that scales to fit its container.

⚠️

Common Pitfalls

Common mistakes when making a website responsive include:

Using fixed widths in px instead of relative units like % or em, which do not adapt to screen size.
Forgetting to add the <meta name="viewport"> tag in HTML, which is needed for mobile browsers to scale properly.
Not using media queries, so the layout stays the same on all screen sizes.
Images and videos not scaling, causing overflow or horizontal scroll.

Example of wrong and right ways to size an image:

css

/* Wrong: fixed width causes overflow on small screens */
img {
  width: 400px;
}

/* Right: max-width 100% makes image scale down */
img {
  max-width: 100%;
  height: auto;
}

📊

Quick Reference

Here are quick tips to make your website responsive:

Use meta viewport tag in HTML: <meta name="viewport" content="width=device-width, initial-scale=1">
Use media queries to change styles for different screen sizes.
Use flexible layouts with Flexbox or Grid.
Use relative units like %, em, rem instead of fixed px.
Make images and videos scale with max-width: 100% and height: auto.

✅

Key Takeaways

Use media queries to apply different CSS rules based on screen size.

Always include the viewport meta tag for proper scaling on mobile devices.

Use flexible layouts like Flexbox or Grid with relative units for adaptability.

Make images and media scale with max-width: 100% and height: auto.

Avoid fixed pixel widths to prevent layout breaking on small screens.