A Responsive page is one page that rearranges itself to fit every screen. You build it from sections stacked down the page, and you use Containers to set things side by side on a computer and stack them on a phone. For the few objects that need an exact spot, such as a badge on a photo, tick Allow free dragging and pin them.
Before you start
- Check the page type. Select the page and go to Inspector > Page Settings > Page Layout. It should say Responsive. If it says Centered Layout, see My website looks wrong on a phone: how mobile works in EverWeb.
- Turning an existing page into a responsive one? Changing the Page Layout can rearrange your whole design, and you can't undo it. It's safer to add a new page and move your content across: click Add Page, choose Responsive in the filter menu at the top of the Theme Template Chooser, pick Blank Responsive and the Home page style, then click Select.
How a responsive page is built
Every Full width object, and every Container, is a section. Sections sit one under another in the same order on every screen, and shrink to fit. A Container arranges what's inside it, and you can put Containers inside Containers, such as a Row holding two Columns. Objects that can't be Full width, such as some widgets, must go inside a Container. Keep them about 280 to 320 pixels wide so they fit on a phone.
Add a Container
- Click Containers in the toolbar.
- Choose Container Row, Container Column or Container Free Flow.
- Drag objects into it, or click the + button in the middle of the empty Container.
Already have the objects on the page? Shift-click each one, right-click (or Control-click on a Mac), choose Contain As, then Row, Column or Free Flow.
| Layout | On a computer | On a phone |
|---|---|---|
| Column | Objects stacked top to bottom | Still stacked, each one narrower |
| Row | Objects side by side | Stays side by side and squeezes, unless you set Wrap (see below) |
| Free Flow | You place objects anywhere inside it | Objects keep their pinned places, so check it on a phone |
To change it later, select the Container by clicking an empty part of it (or right-click and use Pick Layer), then go to Inspector > Widget Settings (the cog, the last icon) and change Display > Layout.
Make the contents stack on a phone
- Rows: in Widget Settings > Display, set Wrap to Wrap. The objects then drop below each other when the screen gets too narrow. The default, No Wrap, keeps them in one line.
- Want the second object on top on a phone, such as the photo above its text? Set Wrap to Reverse Wrap.
- Objects side by side in a Row: untick Full width in Inspector > Metrics and give each one a width. A Full width object in a wrapping Row takes a line to itself.
- Objects in a Column or directly on the page: tick Full width, then type a Max Width so they don't stretch too far on a large screen. My website looks fine on my computer but is cut off or jumbled on my phone has more on this.
- Leave Height on Auto (Widget Settings > Sizing) so the Container can grow when its contents stack.
Place one object exactly: Allow free dragging and pinning
In EverWeb 4.5 and later you can place an object anywhere on a Responsive page, directly on the page or inside a Container:
- Select the object and go to Inspector > Metrics.
- Tick Allow free dragging and drag the object where you want it.
- Click Pin Settings and choose where to pin it, such as top and right. Tick Constrain to edge to hold it right at that edge.
An object placed freely doesn't push anything else down. Use it for a few objects, not a whole page: if every object is placed freely, nothing stacks on a phone. To put an object back in the flow, untick Allow free dragging. To drag an object out of a Free Flow Container, hold Command (Mac) or Alt (Windows) as you drag.
Why not use Responsive Rows?
Responsive Rows are the older version of Containers, and we no longer recommend them for new pages. Your existing ones will keep working.
| Container | Responsive Row | |
|---|---|---|
| Layouts | Row, Column or Free Flow | Row only |
| Width | Full width or a set width | Full width only |
| Inside other Containers | Yes | No |
| Allow free dragging and pinning inside | Yes | No, the box is greyed out |
To replace one, add a Container Row next to it, drag the objects across, then delete the empty Responsive Row. Deleting it also deletes anything still inside, so check it's empty first, and use Edit > Undo if you need to.
Which Container is this object in?
Right-click the object and choose Embed In. The list shows the Container it's in and lets you move it to another one. Give your Containers names in Widget Settings, such as "Header" or "Services", so the list makes sense. For selecting hidden or overlapping objects, see Why won't this go where I drag it?.
Check it worked
Drag the EverWeb window narrower and watch the page rearrange. Then click Preview, choose Preview QR Code and scan it with your phone. Nothing should slide sideways or sit on top of anything else. If it does, see My website looks fine on my computer but is cut off or jumbled on my phone.
Short on time? We can rebuild your website as a responsive site for you. Ask support for a no-obligation quote.