Fulfledge

Fit any screen width

INPUT · Slides

Swap what you show by width

01 / 05

Some things do not fit however you arrange them

You made the text smaller and capped the widths, and there are still things that will not go on a phone. A menu of six items, for instance.

When that happens there is another move: do not show it at all. You change which elements appear, per width.

02 / 05

display: none means "as if it were not there"

An element with display: none; does not only disappear from the screen, it stops taking up room. Everything around it closes up.

You write it on the thing you want gone. One line and it is gone.

.pc-menu {  display: none;}

03 / 05

Hide one, show the other

A swap is written as a pair. Ordinarily you show the desktop one and hide the phone one, then reverse it inside @media.

.sp-menu {  display: none;}@media (max-width: 670px) {  .pc-menu {    display: none;  }  .sp-menu {    display: block;  }}

04 / 05

What you hide is not read out either

Contents hidden with display: none; disappear from software that reads a page aloud as well. So you must not hide anything important.

What you may hide is about:

  • something you can do another way as well (a button that opens the menu, say)
  • decorative pictures

Just those two.

05 / 05

The feeling of building a screen per width

By this point you are assembling a different screen for each width out of the same HTML. This is the last piece of the advanced part.

Have a go.