Every browser renders a page inside a viewport — the visible area available for your content. On desktop machines that area is usually close to the window size, but on phones and tablets browsers historically pretended to be much wider so that older desktop-only sites would still fit. The viewport meta tag is how you tell a mobile browser to stop pretending: it sets the layout width to the device width and establishes the initial zoom level. Without it, even carefully written responsive CSS will appear shrunken and unreadable on a phone.
Once the viewport is configured correctly, the next question is where your layout should change. CSS breakpoints are the specific viewport widths at which you introduce new rules through media queries — stacking columns, resizing type, hiding or revealing navigation. Breakpoints are best chosen by watching where your own content starts to break rather than by memorizing a list of device widths, since the range of real screen sizes is continuous and constantly shifting. You will also decide on a direction: mobile-first, which starts with a simple small-screen layout and adds complexity using min-width queries, or desktop-first, which starts wide and strips down using max-width queries.
As you watch the videos below, pay attention to three things: the exact syntax of a media query and where it sits in your stylesheet, how the order of rules determines which styles win when several queries match, and how the presenters decide that a layout needs a breakpoint at all. Afterward, practice testing your own pages by resizing the browser window and using your browser's device emulation tools at several widths, not just one or two.
A hands-on tutorial from CodeWithHarry's Sigma web development series covering CSS media queries. Expect the practical syntax — the @media rule, min-width and max-width conditions, combining conditions, and writing rules that take effect only at particular viewport ranges — demonstrated in a live stylesheet.
This is the code-level piece of the topic: it shows exactly how to write the media queries that implement your chosen breakpoints, which is the skill you will be assessed on.
This Webflow video focuses specifically on designing across breakpoints — how a single design is adjusted at different viewport widths so it looks and works well on each device class. It should illustrate the workflow of moving between screen sizes and deciding what needs to change at each one, including how changes at one breakpoint relate to the others.
It directly addresses the breakpoint strategy subtopics, including the question of which direction changes cascade, and gives a visual, design-oriented view that complements the code-focused tutorial.
A brief conceptual overview from Webflow introducing responsive design: the idea that a layout should adapt automatically whether someone is on a phone, tablet, or large display, without forcing the user to zoom or scroll sideways. Expect a high-level framing of why fixed-width layouts fail on modern devices and what adapting across screen sizes means in practice.
At under four minutes it sets up the vocabulary and motivation for viewport and breakpoint work before you touch code, which is useful context for the device-screen-sizes subtopic.
Together these videos cover the media query pillar of responsive design named in MO1 and give you the syntax you need for MO4, where min-width queries and a correctly configured viewport meta tag are combined into a mobile-first stylesheet. The Webflow breakpoint video supports MO5 by making the consequences of breakpoint direction and ordering visible, so you can reason about maintainability and content prioritization rather than guessing. The introductory responsive design video frames the fluid, continuous-scaling mindset behind MO2 and MO3, reminding you that breakpoints are adjustments to an already flexible layout, not a substitute for one.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.