# My site displays badly on mobile

> Most visits to an online shop now happen on a phone, and that is where display faults cost the most. The good news: the causes are few, they can be recognised by eye, and most are fixed in the stylesheet without touching the rest of the site.

- Source canonique : [https://allaux.fr/en/problemes/affichage-mobile-casse](https://allaux.fr/en/problemes/affichage-mobile-casse)
- Langue : EN
- Dernière mise à jour : 2026-09-30

## Direct answer

> Check the viewport meta tag in the header template first: themes/your-theme/templates/_partials/head.tpl on PrestaShop, the theme header.php on WordPress. Without width=device-width everything else is skewed. For horizontal overflow, switch the developer tools to mobile view and find the element wider than the screen, almost always a table or a fixed pixel width.

## Four faults, four causes

- The page shifts sideways and can be dragged horizontally: one element is wider than the screen, almost always a table, an image or a block with a fixed pixel width.
- Text is tiny and needs zooming: the viewport tag is missing or badly set in the template.
- Buttons touch each other and you tap the wrong one: tap targets are too small, a spacing fault more than a layout one.
- The menu does not open, or opens and will not close: that is a script problem, not a style one.

## Horizontal overflow, fault number one

A single over-wide element is enough to shift the whole page, and it is often invisible: a banner image imported at full size, a product specification table inherited from a page pasted out of a word processor, an embedded video with a fixed width, or a promotional block added by a module.

Finding it is simple and needs no paid tool: open the page on a computer, narrow the window down to phone width, and watch when the horizontal scrollbar appears. The guilty element is the one sticking out at that precise moment. On a shop, nine times out of ten it is content entered in the admin, not the theme.

## Slow on mobile and broken on mobile are two subjects

They get confused because they show up together. A two-megabyte image displayed in a three-hundred-pixel frame does not break the layout, but it makes the page painful on a mobile connection, and it shifts content while loading — which page experience metrics penalise.

A layout fault is fixed in the stylesheet: bounded work, measurable in hours.

A mobile performance fault means reworking images, third-party scripts and loading order: a separate project.

A touch ergonomics fault is a design decision, not a technical correction.

## Check on a real phone first

> A desktop browser’s mobile mode simulates dimensions, not touch behaviour or real font rendering. A fault that only appears on one model often comes from the browser embedded in an app, not from the site.

## Carry on with the right page

- **CSS and responsive bugs after a theme change** — If the faults appeared with a new PrestaShop theme. ([/prestashop/problemes/bugs-css-responsive-apres-theme](/prestashop/problemes/bugs-css-responsive-apres-theme))
- **Page builder breaking the layout** — The common WordPress case, when the layout comes from a visual editor. ([/wordpress-woocommerce/problemes/constructeur-pages-casse-mise-en-page](/wordpress-woocommerce/problemes/constructeur-pages-casse-mise-en-page))
- **Optimising product images** — If the issue is image weight rather than framing. ([/guides/optimiser-images-produits](/guides/optimiser-images-produits))
- **Core Web Vitals** — What page experience metrics actually measure on mobile. ([/glossaire/core-web-vitals](/glossaire/core-web-vitals))

## FAQ

### My theme is advertised as responsive, so why is the display broken?

Because a responsive theme handles its own blocks, not the content you enter. A table pasted from a word processor or a full-resolution image inside a description breaks any theme.

### Do I need a separate mobile site?

No, and it is counterproductive: two sites to maintain, twice the risk of divergence, and search complications. One layout that adapts remains the right approach.

### Can the problem come from a module?

Yes, very often. Review, promotional banner and chat modules inject their own styles and scripts, sometimes with no mobile adaptation at all.

### How do I know mobile visitors abandon because of this?

By comparing step-by-step progression through the checkout between mobile and desktop. A clear gap at one specific point names the screen to fix first.

### Does fixing mobile display improve search ranking?

Mobile usability and display stability are among the signals taken into account. I do not promise a figure: what I observe is that display fixes have a measurable effect on add-to-cart rates.