A page that looks good in a wide editor can still have an overflowing menu, unreadable text or a difficult form on a phone. Test the published SitePad page at different widths and fix the element causing the problem.
01 Review and correct the layout
- Open the page in SitePad and use the available device previews. Also open its public address on a real phone, because editor previews do not reproduce every browser or touch interaction.
- Read the page from top to bottom at a narrow width. Look for horizontal scrolling, clipped text, overlapping buttons and unusually large empty spaces.
- Inspect the affected row, column or widget. Replace an unnecessarily fixed width with an appropriate automatic or full-width layout where the widget provides that control.
- Check multi-column sections in their stacked layout. Keep headings, text and their associated images together in a sensible reading order.
- Review the Primary Menu widget's dropdown breakpoint and test opening, closing and following the mobile menu.
- Test forms, telephone links, buttons and image galleries with touch and keyboard input. Make the purpose of each control clear without relying on hover.
- Update the page and repeat the checks on the public version after any relevant cache refresh.
Common questions
Should I fix overflow by shrinking all text?
Find the wide element first. A fixed-width image, long address or nested row can create overflow even when the text size is reasonable.
Does hiding content on mobile solve a difficult layout?
Only hide material that is genuinely unnecessary in that context. Essential prices, contact information and instructions should remain available to phone users.
Why does the phone still show the old design?
Check the exact URL, publication state and browser or site cache. Compare in a private window before making another layout change.