Responsive Design

Learning objectives#

• Explain mobile-first design
• Use fluid widths and max-width
• Make images and media flexible
• Use clamp() for fluid font sizes
• Build layouts that adapt without media queries

Explanation#

Start with the viewport meta tag. Without it, phones pretend to be desktops and shrink your page.

Mobile first: write the base styles for small screens, then add rules for bigger screens. Small screens get the simplest CSS, and it is easier to add columns than remove them.

Fluid sizes: use %, max-width, rem and fr instead of fixed pixel widths. img { max-width: 100%; height: auto; } stops images overflowing.

clamp(min, preferred, max) sets a size that grows with the screen but stays within limits: font-size: clamp(1.5rem, 5vw, 3rem).

Intrinsic layouts adapt without media queries: grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) creates as many columns as fit.

Code example: A layout that adapts on its own#

1<style>
2  * { box-sizing: border-box; }
3  body { margin: 0; font-family: sans-serif; }
4  img { max-width: 100%; height: auto; display: block; }
5  .container { width: min(100% - 2rem, 1000px); margin-inline: auto; }
6  h1 { font-size: clamp(1.5rem, 5vw, 2.75rem); }
7  .grid {
8    display: grid;
9    gap: 1rem;
10    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
11  }
12  .card { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
13  .card p { padding: 0 12px; }
14</style>
15

16<div class="container">
17  <h1>Our Destinations</h1>
18  <div class="grid">
19    <div class="card"><img src="https://picsum.photos/id/1015/400/250" alt="River valley"><p>Valley</p></div>
20    <div class="card"><img src="https://picsum.photos/id/1016/400/250" alt="Canyon"><p>Canyon</p></div>
21    <div class="card"><img src="https://picsum.photos/id/1018/400/250" alt="Mountains"><p>Mountains</p></div>
22  </div>
23</div>

Cards show three per row on wide screens, two on tablets and one on phones — resize the preview to see it change, with no media queries.

Step-by-step explanation#

1. box-sizing: border-box makes widths include padding and border.
2. Images never exceed their container.
3. min(100% - 2rem, 1000px) gives a 1rem gutter on phones and a 1000px max on desktops.
4. clamp() makes the heading grow smoothly between 1.5rem and 2.75rem.
5. auto-fit + minmax(200px, 1fr) fits as many 200px+ columns as the width allows.

Real-world use case#

Common mistakes#

Best practices#

• Write mobile-first CSS
• Use max-width instead of width for containers
• Make all images fluid
• Prefer intrinsic layouts (auto-fit, flex-wrap) and add media queries only where needed
• Make tap targets at least 44×44px

Remember this#

Practice exercise#

1.gallery {
2  display: grid;
3  gap: 10px;
4  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
5}
6.gallery img { max-width: 100%; height: auto; display: block; }

Mini quiz#

Want more? Practise all CSS MCQs · CSS interview questions

Related topics#

My notes#

Saved in this browser.