How do I make my page stack neatly on a phone? - Forum

How do I make my page stack neatly on a phone?



User: Paul-RAGESW 2 days ago
On a Responsive page you build the page from sections, and use Containers to put things side by side on a computer and stack them on a phone.

1. Check the page type: select the page and go to Inspector > Page Settings > Page Layout. It should say Responsive.
2. Click Containers in the toolbar and choose Container Row (side by side), Container Column (top to bottom) or Container Free Flow (place things anywhere inside it).
3. Drag your objects into the Container, or click the + button in the middle of it.
4. For a Row, select the Container, go to Inspector > Widget Settings and set Display > Wrap to Wrap. The objects then drop below each other on a narrow screen. Reverse Wrap puts the second object on top, such as a photo above its text.
5. Leave the Container's Height on Auto so it can grow when its contents stack.

Need one object in an exact spot, such as a badge on a photo? Select it, tick Allow free dragging in Inspector > Metrics, drag it into place and use Pin Settings. Use this for a few objects, not the whole page, or nothing will stack on a phone.

To check it, make the EverWeb window narrower and watch the page rearrange. Then click Preview, choose Preview QR Code and scan it with your phone.

Responsive Rows are the older version of Containers. They still work, but we recommend Containers for new pages.

Full guide, with a table of what each layout does on a phone:
Build a responsive page with Containers so it stacks neatly on a phone

Questions about this? Reply here and we'll help.

-------------------------------
Paul
EverWeb Developer


Post Reply
You must login or signup to post.