Website looks bad on mobile? Here's how to make it calm and clear
A website that looks bad on mobile is almost never a single problem, but a mix of text that's too small, columns that don't stack, and buttons placed too close together. You fix it by first doing a quick baseline check and then tidying up layout, text, menu, media and forms one by one. This guide walks you through that path in eight steps.
Step 1: start by making visible what's going wrong on mobile
Start with a short baseline check. No complicated theory, just look at how your website behaves on different phones and screen sizes. Work through this checklist:
- Open your website on at least two different phones.
- Check the font size and line spacing. Can you read comfortably without zooming in?
- Test whether buttons and links are big enough to tap with one thumb.
- Check whether horizontal scroll appears as soon as you swipe sideways.
- Check that the menu is clearly visible and opens and closes logically.
Also use your browser's developer tools
There you view your website on different mobile screens, from an average phone to a larger device. On a small screen, focus mainly on readability and the space between lines; on a medium screen, on headings and buttons per section; and on a larger screen, on whether the top of the page feels too empty. Nothing should fall outside the view or get cut off.
At swap.coupons, the first version was mainly built for desktop
On mobile, blocks and text fields jumped around and visitors had to zoom in to read buttons. By first making a list of every page that felt cluttered, with screenshots attached, we could improve in a targeted way instead of tinkering on gut feeling.
Step 2: turn your layout into one clear column
A website often looks bad on mobile because a desktop design has simply been shrunk down. Text stays in multiple columns even though there's no room for that on a small screen. The solution is almost always a calm setup in one column, with clear blocks and enough breathing room between the parts.
- The main content sits in one column, with no sidebar.
- Every section has enough vertical space, so blocks don't stick together.
- There's no horizontal scroll needed on the most important pages.
- Text and images alternate for a calm rhythm.
- Headings don't break in odd places.
In the block editor, you set for each column block how it behaves on smaller screens
Make sure columns stack instead of sitting side by side. That stops text getting squeezed into narrow strips. Also work with a recognisable order: the core message in one sentence at the top, then proof or benefits, then explanation or steps, then social proof, and finally contact details or a clear call to action. Someone scrolling quickly then understands intuitively where a section starts and ends.
Step 3: make text big enough and easy to scan
For running text on mobile, use a minimum size of sixteen to eighteen points and keep the line spacing generous, so the text has room to breathe. Keep paragraphs short so people can scan easily, and use bullet points where that helps a list get across quickly.
Good headings help both visitors and search engines
Work with one clear main heading on the page, subheadings beneath it, and possibly short sub-subheadings for details. Keep headings concrete and descriptive. Avoid vague text that says nothing about the content of the section below it.
Technically, you handle this with a media query for screens up to 768 pixels wide
Set the base text there to sixteen pixels with a line height of 1.7, and scale your headings down with it, so a main heading doesn't fill half the screen.
Step 4: make sure your menu works calmly and predictably
On mobile, the menu is your most important navigation tool. Stick to these rules:
- Use a recognisable menu icon that doesn't compete with other buttons in the header.
- Let the menu slide into view calmly and dim the background with a light overlay.
- Make sure visitors can clearly see where they are on the website.
- Don't show more main navigation than needed. The rest can live in sub-pages.
The simplest test: hold your phone in one hand and use only your thumb
Can you open and close the menu easily without having to aim? Can you go back to the previous page without frustration? This small test often says more than long reports. Also check that the menu closes immediately when you tap outside it, that the most important pages are at the top, and that a way to get in touch is always quickly within reach.
Step 5: adapt images and video for small screens
For every important image, create a version that works well on a narrow screen. Keep the subject centred and choose a format that suits the width of a phone. That way you avoid important text or faces being cut off.
On mobile, avoid a heavy background video that plays automatically
Replace it with a calm image or a still frame, and put the video behind a play button, so the visitor decides for themselves whether the video starts.
Also turn on lazy loading, so not all images have to load at once
Combine that with a fixed ratio for important images, with width and height in the code, so nothing jumps around while scrolling. Give every image a short, clear alt description and a maximum width of one hundred per cent.
Step 6: make forms and buttons easy to tap
Group related fields together, for example personal details, company details and message. Don't show unnecessarily many empty fields. Fewer fields feels calmer right away. Use a contrasting colour for your most important button, and write concrete text that makes clear what happens after the click.
- Are all the required fields really necessary?
- Can you fill in every field comfortably with your thumb?
- Is there a clear explanation next to every field?
- Is the submit button wide enough?
- Is the confirmation after submitting easy to read on mobile?
Step 7: a real-world example of a website that's been fixed up
Theory is nice, but you only feel the impact once you apply it to a real website. On projects such as swap.coupons and local service providers, we kept seeing the same patterns come back:
- Too many elements in the first screen's worth of content.
- Columns that don't stack properly on smaller screens.
- Text blocks that are too wide or sit too close to the edge.
- A menu that gets in the way of overlays and forms.
After tidying up layout, text, menu and forms, the website felt calmer and more trustworthy on mobile
Visitors could read everything and tap buttons without zooming. That meant more time on the page and more completed forms, without adding any new ads. If you're considering advertising, first read whether Google Ads really works before you free up budget. And if your customers mostly come in locally, take a look at how a trade business can make smart use of WhatsApp and your Google Business Profile NL.
Then put together your own improvement plan: note the biggest problems for each important page, plan actions for layout, text, menu, media and forms, and put a date in your calendar to test on mobile again.
Step 8: check the mobile experience and your SEO signals
A website that looks good on mobile is a direct win for your SEO. Search engines pay attention to user experience, time on the page, and how easily someone can scroll and click. So finish this process with a short check where you look at both how it feels and what the measurements say.
- You can read all the important content without zooming in.
- There's no horizontal scroll and nothing falls outside the view.
- Menu and forms work calmly and predictably.
- The mobile report from a testing tool shows a clear improvement.
If you'd like us to take a look at the mobile experience and the visibility of your website, check out our SEO improvement service.
Step 9: Google indexes the mobile version, not the one on your computer
There's a side to this topic that has nothing to do with taste, and that you need to know before you change anything. Google crawls and indexes websites with its phone crawler. So content a visitor sees on their computer but not on their phone isn't just a presentation difference: for the search engine, that content effectively doesn't exist. Google describes this in its recommendations on mobile-first indexing, checked on 25 August 2026.
That leads to a few rules that get broken time and again as soon as someone wants to make the site look calmer on the phone:
The same content in both views
If you shorten the text on mobile because it would otherwise get too long, you're shortening what Google reads. Text that's collapsed inside an expandable block still counts, because it's simply there in the code. Text that your template doesn't print on mobile doesn't count.The same titles and descriptions
It happens that a mobile template leaves out a heading to save space. That throws away exactly the signal that tells search engines what the page is about.The same structured data
If your structured data only lives in your desktop template, your rich results depend on something the crawler doesn't see.The same images, with their alt text
An image that's hidden on mobile no longer counts in image search.The same crawl instructions
A noindex that's been left behind in a mobile template is one of the costliest mistakes there is, and you won't see it if you view the site on your computer.The check is simple and free: open the same page on your computer and on your phone and compare what text is there. If a whole paragraph is missing on the phone, you know where to start. This links directly to the technical work we cover under technical SEO NL.
Why your site is shown shrunk down, and where that side strip comes from
Two complaints almost always come together and have different causes. The first: the whole site is there but shrunk down, with text you can't read, as if the phone has zoomed out the computer version. The second: the site looks fine but you can drag it sideways, and there's always an empty strip on the right.
The first is almost always caused by the viewport rule.
If it's missing from the head of the page, the browser assumes your site was built for a wide screen and shrinks the whole thing to fit. It's the first rule of every responsive design and no stylesheet replaces it, as Google's own explanation of responsive design also states, checked on 25 August 2026. Also watch out for the variant that blocks zooming in: forbidding your visitor from zooming shuts out everyone who needs bigger letters, and it doesn't solve a single layout problem.
The second is almost always one element that's wider than the screen.
Sideways scrolling is never a mystery, there's always one culprit, and it's usually one of this short list:
- A block with a fixed width in pixels that no longer fits on a narrow phone.
- An image without a maximum width that sticks out past the edge.
- A wide table, usually a pricing or specification table, that can't collapse and needs its own scrollbar inside a wrapper.
- A long word or a long web address with no break point, which stretches its whole line.
- An element that's parked off-screen but still takes up space, for example a menu that slides off to the right instead of disappearing.
You don't need any paid tool for this
Narrow the browser window on your computer down to phone width and then go a bit further: the point where the scrollbar appears at the bottom tells you exactly which width breaks it, and nine times out of ten you'll recognise the block straight away. That's the same method you used to order your columns in step 2.
Images: why the phone gets the same photo as the computer
On most small business websites, the phone downloads exactly the same image as the computer, and then shrinks it. The visitor doesn't see that, but they do pay for it: they're pulling in a file meant for a wide screen, over a mobile connection, at exactly the moment when patience is thinnest.
It can be fixed with three changes, and none of the three is rebuilding the site:
Deliver multiple sizes of the same file
In HTML you can offer a set of sizes and let the browser choose what fits the screen. In WordPress, the system already does this when you upload, as long as your theme doesn't force the large version.Give every image its width and height
That's not just a speed issue: without those dimensions, the browser can't reserve space, and the text jumps down as soon as the image loads in. It's the most common cause of a jumpy layout, as described in Google's explanation of visual stability, checked on 25 August 2026.Crop it, don't just compress it
A landscape photo of the whole team becomes a tiny strip on a phone where no one is recognisable any more. A separate crop for mobile is worth more than the same photo shrunk down until it's unreadable.One more warning about deferred loading, because that often goes wrong. Deferring every image sounds good and backfires in the first screen. The top image is exactly the one the visitor is waiting for, and deferring that is delaying it on purpose. Defer what's further down, never the first one.
Frequently asked questions about a website that's bad on mobile
Why does my website look bad on mobile even though the theme is responsive?
In practice, this is often caused by separate blocks and settings layered on top of the theme. Think of extra columns, fixed widths, custom margins or bespoke CSS. Page builders can also have settings that don't carry over well to smaller screens. So it's not just the theme, but the combination of theme, blocks and content.
Should I get a separate mobile website built?
For most businesses, that's not necessary. A good responsive setup with a clear one-column structure is often enough. A separate mobile website means more maintenance and duplicate content, which can make SEO harder. It's better to focus on one environment that works well everywhere.
Does a poor mobile experience affect my position in search engines?
Yes. Search engines look at how well a website performs on mobile devices. If people leave quickly or have to zoom in a lot, that sends a bad signal. A website that's calm and clear on mobile is exactly what helps you become more visible for searches related to your services.
What do I do if my page builder has few mobile options?
Start with the simplest changes, such as space between blocks, font size and stacking columns. Sometimes it's smarter to build new important pages with the block editor, rather than keep forcing everything into a builder that doesn't match what you need.
How often should I test my website on mobile?
At the very least, test after bigger changes, such as a new theme, a new landing page or a large form. On top of that, a regular check once a quarter is smart. Use both real phones and a test in the browser, so you cover different screen sizes.
Summary: you now have a clear path for mobile
You've learned how to do a short baseline check, how to go from a cluttered layout to one clear column, and how text, menu, images and forms together shape the experience on mobile. By working through these steps calmly, you turn a website that looks bad on mobile into an environment that feels good for visitors and scores better in search engines.
Now pick the page that matters most, work through the checklists and make the first round of improvements. Then repeat the same process on the next page. That way you build, step by step, a website that's just as strong on mobile as it is on desktop. You'll find more guides like this in our knowledge base.
One order to remember if you only take away one thing: first look at what's going wrong, then the column, then the text, and only then the rest. Most people start with the look and end with the measurement, and that's exactly the wrong way round. If you get stuck, or it's a template you can't adjust yourself, show it to us. Send us the page that's doing worst and you'll get back what we'd tackle first. That costs nothing and commits you to nothing. If you'd rather have it done, this work falls under our WordPress specialist service, and what it costs is on pricing NL.