Choose where to set a style, predict which screen sizes will change, and find why a property no longer follows the base. Then check your design at real widths, including the spaces between device presets.
No previous Academy lesson is required. You need a Webflow practice page you can edit for the hands-on route. No cloneable or publishing is required. The demonstrations use a teaching replica of the Designer; they do not show your saved project. Webflow control labels remain in English, and the example content in the animations is Italian.
Choose how to learn
With an AI tutor: download the lesson file, attach it to a fresh conversation in your own AI assistant, and start in your language. The tutor guides; you make the changes. It will agree how to inspect your work through a Webflow MCP connection where configurable, an accessible browser/Sandbox, screenshots or reported settings. It will briefly ask about experience you have not already supplied. Loading the file does not grant access to your project. If the chat has no interactive browser, you can agree to try Work, if available to you; Sandbox access must be verified there. Staying in the chat with screenshots or reported settings is an alternative to choose explicitly, not an automatic fallback.
On this page: follow the reference and exercise below. Before opening a demonstration or explanation, try the prediction yourself. The controls let you pause, seek, restart or step through states with reduced motion. Each aid also has a text summary of values and their origins. You can open it separately for more space.
Prepare one card
For a new attempt, use a blank exercise page, including one in the same practice site. If the class names below already carry styles, agree fresh unused names with the tutor and keep their mapping. Reusing an existing card is an explicit alternative: existing styles do not count as work completed in this attempt.
Make a blank practice page. In the Navigator build Body → Box lab-page → Box lab-card → Heading lab-title and Paragraph. Both Boxes use the div tag; the Heading uses H1. Assign each named class before styling that element. A class names a reusable styling rule; these names are conventions, not commands. You can use a legacy Div Block if its tag and structure match.
Use Webflow Lab for the heading and Un incontro pratico per costruire la tua prima pagina. for the paragraph. You may translate the ordinary text; keep the exercise values exact and use the agreed class mapping consistently.
On the Desktop base breakpoint:
- Set
lab-pagepadding to 24px on all sides. - Set
lab-cardwidth 100%, max-width 960px, left/right margin Auto, and padding 32px on all sides. - Set
lab-titlefont size 32px and unitless line height 1.2.
Let the card grow with its content. Use a readable neutral appearance. These dimensions are teaching fixtures, not rules for every responsive project. Check the hierarchy, classes, text and base context before continuing.
Find the shared starting point
Predict first: if you change the title’s font size on the Desktop base breakpoint, where do you expect the change to appear?
Compare your prediction with the shared-base demonstration
Desktop is the base rule, not the largest screen. Base styles apply across widths unless another applicable breakpoint declaration overrides that property. Smaller-breakpoint rules flow toward smaller widths; larger-breakpoint rules flow toward larger widths. Selecting a breakpoint does not create an override or copy the page.
Switch between Desktop, Tablet and both Mobile views without changing values. The title should remain 32px. In this demonstration, the selected card’s padding remains 32px too: the breakpoint changes, the rule does not.
The shared base
Teaching replica. No autoplay. Text values and origins are available below the canvas.
Open separatelyRead names and widths
Keep this map available; there is no need to memorize the thresholds. Pixels refer to the page viewport width, not a device model.
| Official name | Rule range |
|---|---|
| Desktop, base | Shared base across widths unless another applicable rule takes precedence |
| Tablet | Up to 991px |
| Mobile landscape | Up to 767px |
| Mobile portrait | Up to 479px |
| Optional large breakpoints | From 1280, 1440 and 1920px upward |
These rule ranges overlap; they are not four page copies. The interface and replicas may abbreviate Mobile landscape and Mobile portrait as Mobile (L) and Mobile. Before a numeric prediction, identify its relevant range on this map. Official Webflow reference.
Make a small-screen difference
Predict first: which views will change if you edit the card’s padding and the title’s size on Tablet?
Apply and compare the Tablet changes
On Tablet, select lab-card and set padding 24px on all four sides. Select lab-title and set font size 28px. Compare with Desktop, Mobile (L) and Mobile. Desktop keeps its base values; the smaller views use the Tablet differences.
Tablet differences
Teaching replica. No autoplay. Text values and origins are available below the canvas.
Open separatelyA second prediction: what will a title-size change made on Mobile, at 479px and below, affect?
Make the Mobile change and compare the result
On Mobile, set only lab-title font size to 24px. Leave Mobile (L) without an extra override. In the order Desktop / Tablet / Mobile (L) / Mobile, title sizes are 32 /28 /28 /24px; card padding is 32 /24 /24 /24px. The Mobile title override does not change Mobile (L).
Mobile portrait differences
Teaching replica. No autoplay. Text values and origins are available below the canvas.
Open separatelyFind why a property stops following
Predict first: if you now change the base title from 32px to 36px, which views will follow? If one stays different, where would you look for the cause?
Find the value source and see how Reset works
On Desktop, change lab-title font size to 36px. Tablet and Mobile (L) remain 28px; Mobile remains 24px. Inspect the source of font size on Tablet: a local declaration takes precedence over the base. The whole element has not stopped inheriting.
Click the property’s applied-style indicator and choose Reset. Option-click on Mac or Alt-click on Windows is another supported route where available. Read the active property and source; do not rely on color alone. Remove the Tablet declaration instead of typing 36px. Tablet and Mobile (L) then inherit 36px from the base; Mobile retains its own 24px.
For the next part of the exercise, explicitly restore Tablet font size to 28px. Padding was not edited.
Value source and Reset
Teaching replica. No autoplay. Text values and origins are available below the canvas.
Open separatelyInclude larger screens
Use only the practice project: large breakpoints cannot be removed after adding them. If 1280px is absent, add it from the larger-breakpoints menu. There is no need to add 1440px or 1920px for this exercise. In this demonstration, 1280px is already prepared; the animation shows the menu and subsequent styling, not the act of adding it.
Predict first: which widths will a title-size change at 1280px affect?
Set and compare a large-screen style
At 1280px, set lab-title font size to 40px. The base remains 36px, and the smaller values remain 28 /28 /24px. The large-breakpoint rule applies upward unless a more specific large-breakpoint rule overrides it.
Start with the base for shared styles, then work outward and introduce only necessary differences. This is why you choose an order; you do not need to rewrite every property at every breakpoint.
Large screens
Teaching replica. No autoplay. Text values and origins are available below the canvas.
Open separatelyCheck widths and shared content
Resize through boundaries and intermediate widths, including 320px. Check readability, clipping and horizontal overflow. For this exercise compare the transitions 991/992, 767/768, 479/480 and 1279/1280px, plus an intermediate width such as 900 or 600px. Device names label viewport ranges; they do not guarantee a result on every physical device.
Predict first: if you edit the title’s text while viewing Mobile, where will the new text appear?
See how content stays shared across views
Temporarily change the heading to Webflow Lab di sabato. Compare Mobile (L), Tablet, Desktop and 1280px, then restore Webflow Lab. Text belongs to the page; breakpoint views are not page copies. Moving an element in Navigator also changes shared structure. A CSS layout change is a different operation from moving a DOM element.
The demonstration uses one canvas with resizing and breakpoint switches. In the live Designer, Expand canvas can show frames side by side; it is different from Preview. That control is not shown in this demonstration.
Widths and shared content
Teaching replica. No autoplay. Text values and origins are available below the canvas.
Open separatelyApply it to a new brief
The card is now for an evening workshop. It needs 20px inner spacing only at widths 479px and below, while preserving the current Desktop and Tablet values.
Before editing, explain where you would intervene and which views you expect to change. Then implement your plan, inspect the relevant views, and explain why the others stayed unchanged. Finally, explain how you would return to inherited spacing without manually copying a number. Distinguish what you predicted, what you actually changed, and what you verified; note any help received.
Actually resetting the final padding is optional extra practice: you can keep the 20px required by the workshop. Once the plan, prediction, execution and explanation are complete, the lesson is finished; you do not need to undo its result to finish.
Sources and further reference
The exercise combines these sources with a separate author-verified practice project. The Designer replicas use controls observed in October 2026. Earlier video interfaces may differ. This does not establish access to your own project or validate learning on its own.
Lesson complete
After the final task, you can choose where to set a style and check which views follow it. Distinguish your practical checks from the help you used. If shared classes are still unclear, the Classes lesson is a useful next step; otherwise apply the principle to a fresh card. This continuation is optional.