Predict which screen widths a style change will affect.
Find the source
Find where a property gets its value in the Style panel.
Use Reset
Explain why Reset differs from typing the inherited value.
Check the result
Check a responsive page between preset widths and apply the principle to a new spacing task.
Before you begin
What you already know
Know how to add and select elements and assign a class in Webflow.
Your practice page
Have a Webflow practice page you can edit. Start with a blank exercise page, including one in an existing practice site.
Your tools
An AI assistant that accepts the lesson file or its full text. To check your work, use the Webflow MCP server if connected, a Sandbox link with an available interactive browser, or screenshots and settings you describe. MCP is optional; no Webflow publication is required.
AI-guided pilot
Learn Webflow breakpoints with your own AI assistant
Build one card, predict which widths a style change will affect, and check the result. Your assistant guides the exercise in your language.
The animations show controls and changes in a reconstruction of the Webflow Designer. They open on separate pages and do not modify your project.
You can talk to the tutor in your own language, even though the lesson file is written in English. The written reference and animations are available in English and Italian.
The lesson file is enough to start: attach it to your AI assistant. The ZIP contains the same file and instructions for getting started. Either way, the tutor can offer links to the online animations.
Attach the lesson file to a new conversation in your AI assistant. If attachments are unavailable, paste the whole file.
Write “Let’s begin”, or a short start message in your own language.
Start on a blank exercise page. The tutor helps you prepare it and agree how to check your work. You make the changes.
You need a Webflow practice page and an assistant that accepts a file or pasted text. Some experience adding elements and assigning classes is useful; the tutor can explain what is unfamiliar.
How will the tutor check my work?
You and the tutor choose an available route: Webflow MCP, a Sandbox link with an interactive browser (including ChatGPT Work where available), or screenshots and settings you report. The tutor verifies its actual access before relying on it. MCP is optional.
With Sandbox, you edit in the original Designer, wait for saving and tell the tutor. It reloads the same Sandbox to inspect the update. For a shared tab, use your assistant’s tab picker if it has one; otherwise provide the browser and URL. The tutor confirms the project and page.
Can I pause and resume?
Ask for a progress recap. In a new conversation, attach the lesson file and that recap. Access to your project must be checked again; conversations do not sync automatically.
Written reference and animations
The tutor offers a short animation when it can help. It shows where a control is or how an example changes in a reconstruction of the Designer. Open it in your browser, then return to the chat; you do not need to watch them all.
This is a pilot tutorial. Available tools affect what your assistant can inspect. You can also agree to use screenshots or reported settings; no Webflow publishing is needed.
Desktop is the shared starting point for styles. Another applicable breakpoint rule can replace the value of an individual property.
Tablet styles also apply at narrower widths; styles on a large breakpoint apply upward to larger widths.
Selecting a breakpoint does not create an override. An override is a value set for that property in a more specific breakpoint rule.
Reset removes a value set locally, allowing an inherited value to apply again. Typing the same number leaves a local value in place.
Changing heading text changes shared content; a breakpoint style change affects the widths where that rule applies.
A quick reference
A breakpoint is a rule for a range of page widths. The viewport is the width available to display the page, rather than the name of a physical device. In this exercise, you work on one card and explain why each change affects particular widths.
The Desktop base and smaller widths
Desktop is the shared starting point. If the heading is 32px there and no other applicable rule replaces its font size, it remains 32px at other widths. A value set on Tablet also applies to Mobile landscape and Mobile portrait, unless a narrower rule replaces that same property.
Find where a value comes from
An override is a value set in a breakpoint rule that replaces an inherited value. The replacement belongs to a property, such as font size; it does not mean the whole element has stopped inheriting styles. In the Style panel, inspect that property’s label or indicator to find its source. Do not rely on color alone.
Remove a local value with Reset
If Desktop has a 36px heading and Tablet has its own 28px value, typing 36px on Tablet makes the numbers match but keeps a local value. Reset removes Tablet’s local font-size value so the base can apply again. Other properties, and narrower rules with their own values, remain separate.
Check real widths and shared content
Resize between the preset views as well as checking each preset. Look for clipped content, unexpected horizontal scrolling and text that is hard to read. Heading text is shared content: changing its words while viewing Mobile does not create a mobile-only version of those words.
The tutor ends with a new spacing task for you to plan, carry out and explain. Open the written reference and contextual demonstrations from the tutor panel when you need a particular step. You do not need to watch every demonstration to finish.
No. Breakpoints let you change styles for different viewport widths on the same page. Selecting Tablet alone creates no override.
What does an inherited value mean?
It is a value coming from another applicable breakpoint. The property has no local value replacing it in the current breakpoint context.
Do I have to Reset the final 20px padding?
No. The final exercise asks for 20px on Mobile portrait. You can keep that result; actually resetting it is optional extra practice after explaining how you would remove the local value.
Help improve these tutorials
What helped, or where did you get stuck? Mention the lesson and the assistant you used. Please leave out private project information.
Your feedback is processed on this site through Cloudflare and sent to my email. I use your email to reply and do not use it for marketing. Technical request data is also processed to deliver the message and limit abuse. Privacy policy