Guides / Finipage / Fixing problems
How to Check That Your HTML Page Works on Phones
Finipage guide · Edit HTML files without code. Open Finipage
A page can look finished on a laptop and still fall apart on a phone. The text shrinks to the size of a footnote, the whole page slides sideways under your thumb, or one image pushes everything off the right edge. Most of these problems come from a short list of causes, and you can check a single HTML file for all of them in about fifteen minutes.
The viewport tag, and the "tiny page" symptom
Open the page on a phone. If it looks like a desktop site photographed from across the room, with readable text only after you pinch to zoom, the page is almost certainly missing its viewport tag. Without it, mobile browsers assume the page was built for a screen roughly 980 pixels wide, render it at that width, and then shrink the result to fit the phone.
The fix is one line inside <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">Check whether it is already there before adding it. In Finipage you can open the HTML source view and search for viewport, but that view is for reading only. Adding the tag means opening the file in a text editor such as Notepad or VS Code, pasting the line after the <meta charset> line, and saving. Avoid adding maximum-scale=1 or user-scalable=no; blocking zoom makes the page harder to read for people with low vision.
Sideways scrolling and how to find the culprit
If the page has the viewport tag but you can drag it left and right, something on it is wider than the screen. The usual suspects:
- A box, section or table with a fixed width such as
width: 1200px. - A large image with no size limit (covered in the next section).
- An embedded video or map with
width="800"written into the tag. - A long unbroken string of text, like a URL.
To find which element is responsible, open the page in Chrome or Edge on a computer, press F12, and paste this into the Console tab:
document.querySelectorAll('*').forEach(el => {
if (el.scrollWidth > document.documentElement.clientWidth) console.log(el);
});It prints every element wider than the window. The last items are usually the real cause; the ones above are parents that grew to hold it. Hovering over an item highlights it on the page.
Once you know the element, the fix is to stop it from insisting on a pixel width. In Finipage, switch the preview to the 390px mobile width at the top of the editor, click the element, and in the Size section of the properties panel change the width from a pixel value to 100% or auto. In a text editor, the equivalent is replacing width: 1200px with max-width: 1200px; width: 100%, which keeps the desktop layout and lets the box shrink on small screens.
Images that are too wide
An image is displayed at its natural pixel size unless something says otherwise. A 2000-pixel photo on a 390-pixel screen will push the layout sideways. Most templates include the following rule. If yours does not, add it to the stylesheet:
img { max-width: 100%; height: auto; }That needs a text editor because it is CSS. For a single problem image, you can instead select it in Finipage and set its width to 100% and its height to auto, so it fills its container without stretching.
Text size and tap targets
Body text below about 16px is hard to read on a phone held at a normal distance. On iPhones there is a second reason to respect that number: if a form field's text is smaller than 16px, Safari zooms in when the visitor taps it, and the page stays zoomed after they finish typing.
Buttons and links need room for a finger. Apple's Human Interface Guidelines suggest at least 44 by 44 points, Google's Material Design uses 48 by 48, and WCAG 2.2 sets 24 by 24 CSS pixels (or enough spacing around a smaller target) as the minimum for its AA level. A text link inside a sentence is fine, but a row of small icon links with no space between them leads to wrong taps.
Both are things you can adjust in Finipage while looking at the mobile preview: select the text and raise the font size, or select a button and add padding on all four sides so it gets taller and wider. Add margin between neighboring buttons if they sit too close. These changes apply at every screen width, so check the desktop preview afterwards.
Long words and URLs
A browser wraps text at spaces. A long email address, a URL pasted into a paragraph, or a product code with no spaces cannot wrap, so it pokes out past the edge and creates horizontal scroll. The CSS fix is:
p, li, td { overflow-wrap: anywhere; }If you cannot edit the CSS, changing the content often works as well: replace the raw URL with a short link text like "see the price list", and keep the full address only in the link itself.
When you need media queries
Some layouts cannot be fixed by changing one element's width. Three cards side by side should become three cards stacked on a phone, and that requires a media query, a CSS block that applies only below a certain screen width:
@media (max-width: 600px) {
.cards { flex-direction: column; }
}Finipage does not edit source code or write media queries, so this kind of change belongs in a text editor. A practical split: do the structural work once in VS Code or Notepad, then use a visual editor for everyday text, color and spacing changes.
Testing: device mode, then a real phone
Chrome and Edge both have a device mode. Press F12, then Ctrl+Shift+M, and choose a phone from the list at the top or type a width such as 360 or 390. Firefox calls it Responsive Design Mode and uses the same shortcut. It is quick, but it is still a desktop browser imitating a phone: it changes the width and user agent, not the rendering engine, so it cannot show Safari-specific behavior.
Before you call the page done, open it on an actual phone. Real devices show what the simulator misses: the keyboard covering a form, or text that feels too small in your hand. The simplest way is to put the page online and open the address on your phone; publishing an HTML page online covers where to host it. After each fix, save, upload the file again to the same place, and reload on the phone.
If the mobile check is part of a final review before launch, the landing page checklist covers everything else to look at before launch.
Want to try it on your own file? Open the Finipage editor. It runs in your browser and your file stays on your device.