Most of the time, one or more objects on the page are wider than a phone screen, which makes the whole page too wide. Set those objects to Full width with a Max Width, and they will shrink to fit. A computer screen is wide enough to hide the problem, which is why the page looks fine there.
1. Check which type of page you have
Select the page in your page list, then go to Inspector > Page Settings > Page Layout.
| It says | What that means | Go to |
|---|---|---|
| Responsive | One page that adapts to every screen | Steps 2 to 5 |
| Centered Layout or Left Aligned Layout | A fixed-width page that stays at its desktop width on a phone, unless you add a separate page for phones (a Mobile Page) | Steps 2 and 6 |
Don't change the Page Layout to fix this. It can radically alter your design, and the change can't be undone.
2. Look at it on your phone
A browser window on your computer doesn't always match a real phone, so use one of these:
- Your published website: open it in a private window on your phone. A private window doesn't use your browser's saved copy. If the page looks right there, your website is fine: see I published but my website still shows the old version.
- Before you publish: click Preview in the toolbar, choose Preview QR Code, and scan the code with your phone's camera.
If the QR code preview doesn't load:
- Put your phone and computer on the same Wi-Fi network, and turn off any VPN or iCloud Private Relay.
- If EverWeb says the local preview server isn't activated, go to EverWeb > Settings > General on a Mac, or Edit > Options > General on Windows, and tick Use preview server.
Note which objects stick out, then fix them one at a time.
3. Responsive pages: fix each object that is too wide
You're in the right place if the page slides sideways, has a white strip down one side, is cut off, or is pushed to the left.
- Select the object. If it appears on every page, it's probably on a Master Page, so change it there.
- Go to Inspector > Metrics (the third icon).
- Under Size, tick Full width.
- In Max Width, type the widest you want the object to be on a large screen, such as its current width. The box stays greyed out until Full width is ticked. Leave it at 0 to fill the whole page.
- If Min Width has a number in it, make sure it's narrower than a phone. Phones are about 375 pixels wide. 0 means no minimum.
- Under Margins & Padding, set any large left or right margins back to 0 or a small number. Margins add to the width.
- Repeat for each object that sticks out.
Two exceptions:
- The object can't be Full width. Some widgets are always a fixed width, such as the Facebook Page Timeline and PayPal (Legacy) widgets. Keep these in a Container, at about 280 to 320 pixels wide.
- The object won't go Full width, or stays too wide, inside a Responsive Row. Right-click it (or Control-click on a Mac), choose Remove From Responsive Row, then follow the steps above.
4. Images: stop them looking squashed or leaving gaps
Finish step 3 for the image first, then:
- Select the image and go to Inspector > Shape Options (the second icon).
- Under Fill, in the image scaling dropdown, choose Scale to Fit.
- Tick Auto adjust height to image size. This removes blank space above and below the image on a phone. It works on images set to Full width and Scale to Fit.
| Setting | What your visitor sees |
|---|---|
| Scale to Fit | The whole image. It can leave blank space unless you tick Auto adjust height to image size |
| Scale to Fill | The image fills its area, and the edges may be cropped |
| Stretch | The image fills its area and can look squashed on a phone |
If an image shows on your computer but is missing on your phone, try switching it from Scale to Fill to Scale to Fit.
5. One section rides up over another
A Container with a fixed height can't grow when its content needs more room on a phone, so the next section lands on top of it.
- Select the Container. If you keep selecting what's inside it, right-click and use Pick Layer.
- Go to Inspector > Widget Settings (the cog, the last icon).
- Under Sizing, set Height to Auto.
- Set Max Height to 0, which means no limit.
- Do the same for any Containers inside it.
Also check that the object isn't set to Allow free dragging (Inspector > Metrics, under Position). An object placed freely doesn't push anything else down, so it can sit over other content on a phone. Untick the box if the object should flow with the page.
6. Centered Layout pages
The whole page is too small or cut off on a phone. This page type keeps its desktop width. Give it a separate page for phones: see My website looks wrong on a phone.
Text overlaps or spills out of its boxes on a phone. Text can take up more lines on a phone than you designed for, so it no longer fits its box. Use Minimum Font Size so the text can get smaller on a small screen:
- Select the text.
- Open the Text Inspector, and go to the Font section.
- Keep your normal size in the Font Size box. In the Minimum Font Size box, enter the smallest size you want on a phone. For example, with a font size of 24, you might enter 18.
- Go to File > Publish Entire Site.
If all your text is in one or two big text boxes, put each paragraph in its own text box too. Long boxes grow on a phone and push other things out of line.
7. Check that it worked
- Publish your website. If you changed several pages, use File > Publish Entire Site. See What's the difference between Publish and Publish Entire Site?
- Open the page in a private window on your phone.
When it's fixed, the page doesn't slide sideways, nothing is cut off, and nothing sits on top of anything else. Check your other pages too, as they often use the same settings.
If you still see the old page, see How to clear browser cache.
8. Still wrong? Send us your project file
We can see your published website, but not your project file (the editable copy of your website, saved on your computer). With it, we can find the exact object causing the problem.
- Go to File > Projects Window to open the list of your websites, titled Welcome to EverWeb.
- Next to your project, click the three dots on a Mac, or the down arrow on Windows.
- Choose Send Project File to Support.
- When the upload finishes, EverWeb gives you a link. Send us that link.
If your project is over 2GB, or the upload doesn't finish, use our project upload page instead. On Windows, zip the whole folder that holds your project, not just the .ewwinproj file.
Please also tell us:
- The name of the page, and of the object that looks wrong
- Your EverWeb version
- Whether you're on Mac or Windows
And send two screenshots: one of the page on your phone, and one of the full EverWeb window with that object selected.