Styling for phones

Your page has to look right on a wide monitor and on a phone. The way you do that is to switch to a narrower size on the breakpoint bar and adjust — and what you adjust there applies to that size and narrower ones only.

The spreading rule is the part worth reading carefully. It saves you a great deal of work, and it will confuse you if you do not know it.

Four sizes, and the widths they really serve

Size	vi	Serves widths
Desktop	Máy tính	1440px and up — no upper bound
Laptop	Máy tính xách tay	1025–1439px
Tablet	Máy tính bảng	768–1024px
Mobile	Điện thoại	767px and below

The four cover every width with no gap and no overlap: every screen falls into exactly one. A 4K monitor gets Desktop — it is the only size with no ceiling.

Four on purpose. In a visual builder a breakpoint is not a cheap media query — it is a tab you have to remember to visit and one more place a value can hide. To check some width in between, drag the canvas edge; you do not need a new size to store values in.

The spreading rule

Read this slowly, because it runs in both directions.

Downward — the direction you rely on. A value set at a wider size applies to every narrower one, until some narrower size sets its own. Set the heading size at Desktop and laptop, tablet and mobile all use it. Change it at Mobile and only mobile changes.

That is why the working order is build at Desktop, then walk down the narrower sizes fixing what breaks. You do not have to set everything at every size.

Upward — the direction that surprises people. A value set only at a narrow size is used at wider sizes that have no value for that property.

It sounds odd, and it is there to protect you: without it, a value you set only at Mobile would simply vanish when you went back to Desktop, and the element would look as though it had never been touched. The upward direction only fills gaps; it never overrides a value that exists.

Together, the priority for one property, high to low:

1. the value set at this size
2. a value set at a wider size, nearest first
3. the element's own base value
4. a value set at a narrower size, nearest first — only if the three above are all empty

The one exception: hiding an element

Hiding does not spread in either direction. It applies to exactly the size where you switched it on.

This is deliberate, and both halves have a reason:

• Hiding an element at Desktop does not drag mobile down with it. If it spread downward, everything you tidied away on desktop would disappear from the phone too.
• Hiding an element at Mobile does not fall back up to desktop. If it did, tidying up the phone layout would silently blank the desktop one.

So "hide this banner on phones" hides it on phones, and nothing more. This is the responsive control you will reach for most.

How this works in practice

1. Build the whole page at Desktop until you are happy with it.
2. Go to Tablet. Fix what is cramped: usually a row that needs to become a column, and some padding that needs to shrink.
3. Go to Mobile. This is where most of the work is: text sizes, stacking direction, and hiding the things that only made sense wide.
4. Laptop usually needs nothing. It inherits everything from Desktop, and that is normal.

Drag the canvas edges to look at the widths in between. The breakpoint bar jumps to whichever size actually serves that width, so you always know which one you are editing.

When a change "does nothing"

Almost always one of three things, in the order worth checking:

You are on the wrong size. Look at the breakpoint bar. Editing at Desktop while believing you are on Mobile is the most common mistake, and it appears to work — the change spreads downward, so the phone does change, right up until you notice desktop changed too.

You have the wrong element selected. In a nested tree, a click easily lands on a child. Open Layer and click the branch you want, or press ⌘ ↑ to go out to the parent.

The thing you are adjusting does not live on that element. The space between two things belongs to the container holding them, not to either of them. If adjusting an element's padding changes nothing visible, you probably want the surrounding container's gap.