A desktop preview can hide narrow-screen problems: an input pushes a button outside a panel, a heading gets clipped or a long task creates horizontal scrolling. Use the same daily-plan files from the first lesson so that your checks are repeatable. A narrow preview tests layout; it does not emulate a phone's keyboard, browser engine or performance.
Prepare content that exposes problems
Import the English tutorial example into the workspace. Change the heading to My study and everyday life plan. Add a task saying Review this week's notes and write down three questions to practise next. First verify that checking and adding tasks works in the desktop preview.
Compare two widths
- Find the preview-size selector beside the preview status and choose the mobile option. The workspace requests a 390px-wide preview.
- Check that the long heading wraps inside the card. The input and Add button should stack vertically.
- Read the entire long task. Its checkbox should remain visible and its label should wrap without crossing the card boundary.
- Check one task and add another. A working initial layout is not enough: the layout must also handle changed content.
- Switch back to the desktop option. With enough room, the input and button should return to a shared row.
The responsive rule used in the example
@media (max-width: 480px) {
.app { margin: 12px; padding: 20px; }
.entry { flex-direction: column; }
.entry button { width: 100%; }
}At widths of 480px or less, this rule stacks the form controls. It gives the button its own row instead of letting it compete with the input. The example also uses border-box sizing so padding is included in element widths. Try changing the breakpoint to 420px, run the project again and compare the same content at desktop and mobile widths.
A practical inspection checklist
- Reading: headings, instructions and long task labels are fully visible. Try a long unbroken word as a separate stress test.
- Interaction: click the checkbox label as well as the small checkbox. Use the keyboard to move focus through the form and confirm the focus indicator remains visible.
- Width: you can read the content without dragging the page sideways. Hiding overflow is not a substitute for fixing an oversized element.
- State: repeat the checks after adding several tasks and entering a long line of text.
What to check on a real device
If the workspace itself is narrower than 390px, its parent container may further constrain the preview. The mobile option is therefore a layout aid, not a guarantee of an exact device simulation. After exporting and hosting the page, open it on a real phone. Check scrolling, font rendering, touch input and the on-screen keyboard. Repeat these checks if you later add images or network requests.
You are ready to export when both preview sizes let you add and complete tasks, long content stays within the card, and controls remain readable and usable.