Website looks broken on mobile

Is this your problem?

• The page scrolls sideways
• Text is tiny and you have to zoom
• Elements overlap or run off the edge
• The menu will not open
• Buttons are too small or too close to tap

What usually causes it

How to fix it, step by step

1. 1

   Check the viewport tag

   View the page source and look for this line in the head. If it is missing, the theme needs it.

   Copy

   <meta name="viewport" content="width=device-width, initial-scale=1">

2. 2

   Find what is too wide

   On the page, open the browser console with a phone-sized window and run this. It lists every element that runs past the screen edge.

   Copy

   [...document.querySelectorAll("*")].filter(e => e.getBoundingClientRect().right > document.documentElement.clientWidth).forEach(e => console.log(e));

3. 3

   Make media flexible

   Add this to the theme custom CSS. It stops images and embeds from being wider than their space, and lets wide tables scroll inside their own box.

   Copy

   img, video, iframe { max-width: 100%; height: auto; }
   iframe { aspect-ratio: 16 / 9; }
   .table-wrap { overflow-x: auto; }

4. 4

   Fix it in the builder

   Switch the page builder to its mobile view and check widths, font sizes and hidden elements for each section.

5. 5

   Make things easy to tap

   Buttons and links should be at least 48 pixels tall and spaced apart. Form fields need a 16 pixel font, or iPhones zoom in when tapped.

6. 6

   Clear caches and test again

   Some caches keep a separate mobile copy of each page. Clear them all.

Stop it happening again

• Check every new page on a phone before publishing.
• Use a theme that is still updated.