You can show an object on some screen sizes and hide it on others. Select it, go to Inspector > Metrics and, under Responsive, untick the devices where it shouldn't appear. This works well for a few swaps, such as a short banner on phones and a wide one on computers. If you're copying most of a page, a responsive layout or a separate Mobile Page is usually a better fit (see the table below).
Hide an object on some devices
- Select the object.
- Go to Inspector > Metrics (the third icon) and scroll down to Responsive.
- Untick the devices where the object shouldn't appear: Show on mobile, Show on tablet, Show on desktop, Show on wide desktop or Show on ultrawide desktop. Point to a box to see the screen widths it covers.
- Make the EverWeb window narrower and wider. The object disappears at the sizes you unticked.
- Publish, then check on your phone. Before you publish, you can click Preview in the toolbar, choose Preview QR Code and scan the code with your phone.
Swapping two versions? Tick the computer sizes on one and the phone and tablet sizes on the other. Make sure every size has one of them ticked, or there's a gap at that size.
Where do phone, tablet and desktop start? These widths are called breakpoints. EverWeb shows them as dashed lines in the editor. To change them, click Breakpoints in the same Responsive section, or choose Insert > Breakpoints.... Set Default puts them back. Most websites never need to change them.
Find a hidden object
- To see them: choose Window > Show Hidden Objects. Hidden objects show as grey boxes with a cross through them. You can see them but not click them. That's normal.
- To select one: right-click an empty part of the page (or Control-click on a Mac), choose Hidden Objects, then pick the object. You can then change its Show on boxes, or delete it. If the page has no hidden objects, this menu item doesn't appear.
Show on Device, a responsive layout or a Mobile Page?
| Show on Device | Responsive layout (Containers) | Mobile Page | |
|---|---|---|---|
| Best for | Swapping a few objects | The same content, rearranged to fit each screen | Centered Layout pages |
| Page type | Responsive or Centered Layout | Responsive | Centered Layout |
| What you keep up to date | Both copies of anything you swap | One page | Two pages |
Hidden objects are still part of the published page, they're only not shown. So:
- Use a responsive layout when the content is the same and only the arrangement changes. See Build a responsive page with Containers so it stacks neatly on a phone.
- Don't make two copies of your main heading or large videos. Rearrange them instead.
- On a Centered Layout page, add a Mobile Page for phones. See My website looks wrong on a phone: how mobile works in EverWeb.
Common problems
| What you see | Why | What to do |
|---|---|---|
| An object vanished while you were working | It's hidden at the window's current width | Use Window > Show Hidden Objects, or right-click the page and choose Hidden Objects |
| The Show on boxes are greyed out | The object is a Responsive Row. Responsive Rows are deprecated and can't be hidden | Hide the objects inside it, or move them into a Container set to Row and hide the Container. See Why won't this go where I drag it? |
| A blank space where nothing shows | A hidden object may be sitting there | Right-click the page, choose Hidden Objects, select it and delete it if you don't need it |
| An object never appears | All its Show on boxes are unticked | Tick at least one |
| It looks right in EverWeb but not on your phone | Your phone may be showing a saved copy | Open the page in a private window on your phone |