DEV Community

Gaurav Mehra
Gaurav Mehra

Posted on

Make Your Website Responsive | Media Queries, Overflow, Box Shadows

#webdev #css #responsivewebdesign #beginners

__

When you build a website, it should look good on mobile, tablet, and desktop. This is called responsive design. In this post, we’ll learn three important CSS tools that help with responsiveness:

  • Media Queries
  • Overflow
  • Box Shadows (with spread-radius)

1. Difference between max-width and min-width

  • max-width → Styles apply when the screen is up to that size or smaller.

    Example: @media (max-width: 600px) applies CSS for screens ≤ 600px.

    👉 Good for shrinking layouts (desktop → mobile).

  • min-width → Styles apply when the screen is that size or bigger.

    Example: @media (min-width: 601px) applies CSS for screens ≥ 601px.

    👉 Good for growing layouts (mobile → desktop).

💡 Tip: Use min-width (mobile-first approach) because it is easier to scale designs as the screen grows.

2. Overflow

Sometimes content is bigger than its container. The overflow property controls how extra content behaves.

.box {
  width: 200px;
  height: 100px;
  overflow: auto; /* adds scrollbar if needed */
}
**
Enter fullscreen mode Exit fullscreen mode

Types of Overflow**

  • visible → Default, content goes outside.
  • hidden → Cuts extra content.
  • scroll → Always shows scrollbars.
  • auto → Shows scrollbars only when needed.

3. Box Shadows (with Spread Radius)
Box shadows add depth and make elements look like cards or floating blocks.

.card {
  width: 250px;
  height: 150px;
  background: white;
  box-shadow: 0 4px 8px 5px rgba(0,0,0,0.2);
}
Enter fullscreen mode Exit fullscreen mode

📌 Syntax:

box-shadow: offset-x offset-y blur-radius spread-radius color;**

  • offset-x → horizontal shadow (left/right)
  • offset-y → vertical shadow (top/bottom)
  • blur-radius → softness of the shadow
  • spread-radius → grows/shrinks the shadow in all directions
  • color → shadow color (with transparency)

👉 If spread-radius = 10px, shadow grows outward.
👉 If spread-radius = -5px, shadow shrinks inward.

*🎯 Demo Project: Responsive Card
*
Here’s a small demo project using all three concepts:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Card</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="card">
    <h2>Responsive Card</h2>
    <p>This card resizes on different screens. Try shrinking or growing the window!</p>
  </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS (style.css)

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f4f4f4;
  margin: 0;
  font-family: Arial, sans-serif;
}

.card {
  width: 90%;
  max-width: 400px;
  padding: 20px;
  background: white;
  border-radius: 10px;
  overflow: auto;
  box-shadow: 0 6px 12px 4px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

/* Mobile first */
@media (min-width: 600px) {
  .card {
    max-width: 600px;
    box-shadow: 0 8px 16px 8px rgba(0,0,0,0.2);
  }
}

@media (min-width: 900px) {
  .card {
    max-width: 800px;
    box-shadow: 0 10px 20px 12px rgba(0,0,0,0.2);
  }
}
Enter fullscreen mode Exit fullscreen mode

✅ On mobile, the card is small and clean.
✅ On tablet, the card grows wider with a bigger shadow.
✅ On desktop, the card expands more with a stronger shadow effect.

Final Words

Use media queries to make your site look good on all devices.

Use overflow to handle content properly.

Use box shadows with spread-radius to add style and depth.

These simple tricks make your website look professional and responsive. 🚀

Top comments (0)