CSS Responsive Design

Imagine building a gorgeous, widescreen display cabinet to showcase your shop items. It looks perfect on a massive showroom wall. But now, you are asked to squeeze that exact same cabinet down to fit inside a tiny telephone booth. Responsive Design solves this design challenge. It is the art of building web pages that automatically scale, resize, and wrap their content to look beautiful on screens of all sizes, from wide desktop monitors to compact mobile phone screens.

In this page:

The Mobile-First Workflow
Fluid Container Layout structures
Scalable Responsive Media Images
Fluid typography (rem and em)
Responsive Navigation Menus

Syntax

css

@media (max-width: length) {
  selector {
    property: value;
  }
}

The Mobile-First Workflow

Mobile-first design is the industry standard workflow. You write your default styles for small mobile screens first, then use min-width queries to add layout columns and spacing as screen sizes expand.

Note: Starting your layouts mobile-first keeps your stylesheets clean, simple, and fast on mobile connections.

Warning: Failing to design mobile-first can require writing complex, heavy code overrides to reset desktop styles on mobile.

Example: The Mobile-First Workflow

css

<style>
.box {
  background: lightblue;
}
@media (min-width: 768px) {
  .box {
    background: lightgreen;
  }
}
</style>
<div class="box">Mobile-first: default style, then a min-width override</div>

Fluid Container Layout structures

Instead of defining container widths in fixed pixels (which can overflow small mobile screens), fluid layouts use relative percentage values. This allows your columns and boxes to shrink and expand dynamically to fit any screen size.

Note: Use a percentage width combined with a max-width setting to keep your content from stretching too wide on massive screens.

Warning: Avoid setting fixed pixel widths on large containers to prevent layout cutoff and horizontal scrolling issues on smaller screens.

Example: Fluid Container Layout structures

css

<style>
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  background: lightblue;
  padding: 10px;
}
</style>
<div class="container">Fluid container</div>

Scalable Responsive Media Images

Large images can easily break your page layout on mobile screens by running off the side of the display. By applying relative widths and height controls using CSS, you can make your images scale down automatically to fit any device size.

Note:

Use the style rules max-width: 100% and height: auto to make your images scale cleanly and stay proportional.
Accepted values:
max-width: 100% — never wider than the parent
height: auto — keeps the aspect ratio
display: block — removes the inline gap
width: 100% — always fills the parent

Warning: Avoid setting fixed pixel width attributes on images unless you want them to remain a static size across all screen dimensions.

Example: Scalable Responsive Media Images

css

<style>
img {
  max-width: 100%;
  height: auto;
}
</style>
<img src="https://placehold.co/600x300" alt="Responsive image">

Fluid typography (rem and em)

Fixed pixel font sizes (like font-size: 16px) do not adjust to different screens, which can make text hard to read. Using relative CSS units (like em, rem, or viewport units) allows your text sizes to scale dynamically relative to the user's browser or screen dimensions.

Note: Use rem units for consistent, accessible text scaling across all screen sizes.

Warning: Be careful when using viewport width units (vw) for font sizes, as text can become tiny on mobile devices.

Example: Fluid typography (rem and em)

css

<style>
h1 {
  font-size: 2rem;
}
p {
  font-size: 1em;
}
</style>
<h1>Scales with root font size</h1>
<p>Scales with parent font size</p>

Responsive Navigation Menus

Navigation bars designed for desktops can easily break on mobile screens due to space limits. To build a responsive menu, use media queries to stack your navigation links vertically or hide them behind an interactive toggle button on smaller screens.

Note: Use mobile-first Flexbox column wraps to build clean, responsive navigation menus easily.

Warning: Make sure your mobile menus have easily clickable targets for touch navigation.

Example: Responsive Navigation Menus

css

<style>
.nav {
  display: flex;
  background: #eef;
  padding: 10px;
  gap: 10px;
}
@media (max-width: 600px) {
  .nav {
    flex-direction: column;
  }
}
</style>
<nav class="nav">
  <a href="#">Home</a>
  <a href="#">About</a>
</nav>

Live Example

Chapter Quiz — Complete all 8 topics to unlock

0/8 topics done

Complete these topics first:

← Previous Lesson CSS 12-Column Grid Layout Next Lesson → CSS RWD Introduction