{}
Learn web design and development
Free interactive courses
← Back to CSS
42

Modern responsive design: fluid layout, range queries and user preferences

Build adaptable interfaces with fluid layout, `clamp()`, modern media queries, container queries and accessibility-aware preference handling.

How much do you know about CSS?

📘 Theory

Responsive mindset: fluid first

Design for the content, not for a fixed device.

Modern responsive design prioritizes fluid layouts that adapt naturally instead of depending on too many hard breakpoints.

Start with flexible containers, scalable images and typography that uses relative sizing.

Define breakpoints only when the content needs them, not because a device chart says so.

  • Use width: 100% and max-width to control width responsibly.
  • Avoid large fixed sizes in the base layout.
  • Use rem for consistency and accessibility.
  • Keep media queries few, clear and intentional.

Fluid units and scales

Combine `%`, `rem` and `clamp()` to control size without awkward jumps.

1

`rem` keeps your scale coherent and accessible.

2

`%` and `vw` let elements respond to their container or the viewport.

3

`clamp()` gives you fluid sizes with safe minimum and maximum limits.

Modern media queries with range syntax

More readable and closer to the way we think about comparisons.

Range syntax lets you write direct comparisons with width and height.

It is equivalent to min-width and max-width, but it usually feels clearer and less error-prone.

  • Older: @media (min-width: 768px)
  • Modern: @media (width >= 768px)
  • Range: @media (600px

Older syntax vs modern syntax

Same result, clearer reading.

1

The classic `min-width` and `max-width` syntax is still valid, but range syntax is more direct and usually easier to scan.

2

Both approaches are equivalent. Pick one and stay consistent within the project.

Breakpoints with intention

Define change points based on content, not habit.

1

You do not need many breakpoints. Choose the points where the design truly starts to break.

2

Mobile-first is still a sensible default: set the base styles first and expand them when larger screens earn the extra complexity.

User preferences

Accessibility and respect for real context.

  • Responsive design is not only visual. It should also be responsive to human context.
  • These queries improve accessibility, perceived performance and comfort.
  • Treat them as part of the design baseline, not as a late-stage extra.
1

Motion

prefers-reduced-motion helps reduce animation for people who are motion-sensitive or for contexts where movement makes reading harder.

2

Color

prefers-color-scheme lets the interface adapt to light or dark mode and stay aligned with the system preference.

3

Data

prefers-reduced-data helps you deliver fewer heavy resources on limited connections or in cost-sensitive environments.

Interaction and input devices

Not everyone uses a mouse.

1

`hover: hover` targets precise pointers such as a mouse or trackpad.

2

`pointer: coarse` detects touch-first interaction and can justify larger tap targets.

3

This avoids meaningless hover effects on phones and improves practical accessibility.

Device features

Orientation, resolution and scripting support.

  • Use them when the device capability truly changes the experience.
  • Do not turn every available feature into another breakpoint unless it solves a real problem.
  • Think about readability, load and fallback before making the behavior more elaborate.
1

Orientation

orientation helps when portrait and landscape genuinely change the composition.

2

Resolution

resolution and min-resolution help you serve sharper assets to high-density displays without treating every screen the same.

3

Scripting

scripting detects whether JavaScript is supported so you can refine fallbacks and progressive enhancement.

Flexible layouts with Flex and Grid

Use Flexbox for component flows and Grid for broader structure.

1

Flexbox is ideal for rows or columns where quick alignment matters most.

2

Grid gives you stronger two-dimensional control for larger sections.

3

Combining both often leads to modern interfaces that are easier to maintain.

Container queries

Adapt components to their container, not only to the window.

Container queries let a component change its layout according to the width of its own container.

Activate the container with container-type and define conditional styles with @container.

  • They are especially useful for reusable cards, sidebars and embedded modules.
  • They reduce the need to solve every micro-layout problem at the global viewport level.
  • They help you build more modular and less fragile systems.

Responsive images and media

Avoid overflow while keeping proportions stable.

1

Use `max-width: 100%` and `height: auto` for fluid images.

2

`aspect-ratio` helps preserve proportions and prevents layout jumps.

🧪 Learn by doing

Example Fluid layout with clamp() Adjust typography and padding with `clamp()` so the interface keeps breathing on every screen.
⌄
Example Breakpoints with range syntax Adjust columns with the modern media query notation.
⌄
Example Auto-fit Grid Build a card grid that rearranges itself naturally.
⌄
Example Container query in a card The card changes layout according to the width of its own container.
⌄
Example Fluid image with a stable ratio Check how an image adapts without distortion.
⌄
Example Orientation and resolution Rotate the device or test a high-density screen to see the UI react.
⌄

🏁 Challenges

Challenge Challenge: fluid and proportional hero title Use `clamp()` and container queries in a hero section.
⌄
Challenge Challenge: modern breakpoint Switch to two columns from 768px onward.
⌄
Challenge Challenge: prefers-color-scheme Add dark mode with a media query.
⌄

🧰 Resources

Useful links

web.dev - Responsive design basics CSS-Tricks - Responsive web design MDN - Using media queries MDN - Container queries MDN - clamp()
Test

Check your knowledge with a test about CSS.

Test for CSS
CodePen: responsive layout
Open in CodePen
Course resources 78
📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets
‹
Lesson 41
Media queries and responsive design
Lesson 43
Container Queries: truly responsive components
›

What is this?

I'm Cristian Eslava and I sometimes build websites so both you and I can learn and experiment. culTest

I made this in February 2026 to make learning easier for my students. The idea is to learn web development by practicing and to keep expanding the project with new topics, tests and challenges.

It draws inspiration from MDN, W3Schools, CodePen, Manz and many other web development references. I wanted to combine useful theory, runnable examples, challenges and the testing system I had already built for culTest. culTest

If you liked it, if you didn't, or if you want to get in touch, write to me at cristianeslava@gmail.com