Container Queries in CSS
CSS container queries allow elements to respond to their parent's size rather than the viewport. I explain how they work and how they improve responsive design.
Articles
Responsive Design
Responsive design is the practical work of making layouts, navigation, images, and interactions adapt cleanly across screen sizes and input methods. It sits close to responsive development because the implementation patterns overlap, but the emphasis here is on the design and interface decisions that determine whether a page remains usable as the viewport changes.
Below you will find a subset of articles from my blog specifically about Responsive Design. This is an area I have worked with for many years, and it has been a regular subject in my writing. There are fifteen articles collected together for you below.
Container Queries in CSS. 
CSS aspect‑ratio for Responsive Layouts. CSS
aspect‑ratiofor Responsive LayoutsThe CSS `aspect‑ratio` property makes it easier to maintain consistent proportions in responsive layouts. Here, I explore how it works and when to use it.
Dynamic Sizing with CSS clamp(). Dynamic Sizing with CSS
clamp()Use CSS clamp() for fluid typography, spacing, and layouts with clear minimums and maximums, plus media‑query trade‑offs and responsive examples.
Dynamic Sizing with CSS max(). Dynamic Sizing with CSS
max()Use CSS max() for responsive sizing, spacing, and layout decisions where the browser should choose the larger value within a fluid design without JavaScript.
Dynamic Sizing with CSS min(). Dynamic Sizing with CSS
min()In CSS, `min()` function allows us to set the smallest value from a set as the value of a CSS property. This can be hugely useful in responsive development.
Dynamic Calculations in CSS Using calc(). Dynamic Calculations in CSS Using
calc()A discussion on how to use CSS calc() for dynamic calculations directly within your styles. Learn to mix units, perform calculations, and improve responsivity.
Creating Custom Viewport Units Instead of Using vh and vw. Creating Custom Viewport Units Instead of Using
vhandvwCreate custom viewport units with CSS variables and JavaScript to avoid mobile 100vh bugs caused by browser chrome, keyboards, and visible height changes.
Responsive JavaScript and the matchMedia Method. Responsive JavaScript and the
matchMediaMethodIn the past, we used event listeners on the Window to determine the physical dimensions of a document. Using matchMedia allows us to use media query syntax.
Using Container Queries in CSS. Using Container Queries in CSS
Container queries are a powerful new feature in CSS that allow us to move away from view‑port based responsiveness to more explicit isolated areas of the page.
Exploring CSS Viewport Units Beyond vw and vh. Exploring CSS Viewport Units Beyond
vwandvhExplore CSS viewport units beyond vw and vh, including vmin, vmax, vi, vb, svh, lvh, and dvh for mobile browser chrome, writing modes, and sizing bugs.
Adaptive vs. Responsive Design & Development. Adaptive vs. Responsive Design & Development
Now used as almost trivial marketing buzz words, there really are significant differences between responsive and adaptive design and development techniques.
Advanced Techniques for Responsive Web Design. Advanced Techniques for Responsive Web Design
Discover advanced responsive web design techniques with CSS Grid, `clamp()`, container queries, and JS enhancements for performance‑optimised, adaptive sites.
Using Viewport Units in CSS: vw and vh. Using Viewport Units in CSS:
vwandvhUse CSS viewport units vw and vh for responsive sizing, understanding percentage‑of‑viewport behaviour, full‑screen layouts, and mobile browser caveats.
Building Responsive Navigation with CSS and JavaScript. Building Responsive Navigation with CSS and JavaScript
Understanding Media Queries in CSS. Understanding Media Queries in CSS
Understand CSS media queries for responsive design, including screen conditions, mobile‑first and desktop‑first approaches, breakpoints, and device traits.