Start with the task, not a smaller desktop page
A mobile layout is more than a desktop page squeezed into a narrow screen. Visitors should be able to read the main content and complete the page’s purpose without enlarging it or hunting for information off to the side. Start by naming that purpose. On a small organization’s contact page, it might be finding opening hours, calling the team or sending a message. Those actions should remain easy to find when the layout becomes narrow.
Sketch the order of content in one column before deciding how it will appear on wider screens. Put a clear heading first, follow it with the information needed to make a decision, and place related actions near that information. A two-column desktop layout might put an address beside a contact form; on mobile, the address can sit above the form. The relationship stays clear even though the arrangement changes.
Let content fit rather than forcing it to shrink
Use a responsive layout that can grow and contract with the available space. Text should wrap naturally, images should scale within their containers, and columns should stack before they become cramped. Avoid fixed-width page sections that are wider than the screen. A common source of sideways scrolling is one oversized element—such as an image, embedded map, table or long link—pushing the entire page outward.
Keep body text at a readable size instead of reducing it until everything fits. Give paragraphs enough line spacing and separate sections with consistent space so visitors can follow the page without pinching. Allow the browser’s text resizing and zoom features to work; people may need a larger view even when the default layout looks comfortable. Test longer headings and button labels too, because a layout that works with short placeholder text may fail with real content.
Make navigation and controls comfortable to use
On a narrow screen, prioritize a small set of clear navigation choices over a crowded row of links. If you use a menu button, label it plainly and make it easy to recognize when the menu is open. Keep important destinations reachable without requiring visitors to guess what an icon means. Avoid placing essential information only behind a hover effect, since touch users may not have a reliable way to reveal it.
Buttons, links and form fields need room to tap without accidentally activating a neighbor. Space controls apart, use descriptive labels and keep form instructions close to the fields they describe. For example, a volunteer sign-up form can place one labeled field per row, with the submit button after the final field. This is usually easier to scan and operate than two narrow columns of inputs. Check that a visible keyboard focus indicator remains available as well; a responsive layout should work for keyboard users, not only touch users.
Give wide content its own plan
Some content cannot sensibly wrap into one column. A comparison table, for instance, may need its own horizontally scrollable area. That is different from making the whole page scroll sideways: the heading, surrounding explanation and other controls should still fit the screen. Introduce the table in text, use clear row and column labels, and check that the scrolling area does not hide information visitors need to interpret it.
For charts and diagrams, consider whether a simpler mobile version or a short text summary would communicate the point better. For embedded maps or videos, check how the embed behaves inside a flexible container. If an external widget resists resizing, do not let it determine the width of the entire page. Provide an understandable alternative, such as a written address alongside a map.
Test real pages, then fix the cause
Review a few representative pages at narrow and wide widths, in portrait and landscape orientation. Include pages with long titles, forms, images and unusual content—not just the home page. On a phone, try the tasks a visitor would attempt: find a service, read its details and submit an enquiry. If you have to pinch to read or drag the page sideways, note exactly where it happens.
Then identify the element causing the problem rather than masking it by disabling horizontal scrolling for the whole page. A fixed-width image may need to scale; a row of cards may need to stack; a long, unbroken string may need a safe way to wrap. After each change, check the page again with larger text or browser zoom. The goal is not to make every screen look identical. It is to keep the content understandable and the next step usable as the available space changes.
