Wix mobile site looks horrible: what breaks

A desktop layout is built from boxes placed at set positions. On a phone, the same boxes are stacked and resized, and each keeps the size it had on a laptop unless someone changed it in the phone view. A heading set to a large size can wrap onto many lines. A button with a long label can split its words across lines because it is narrower than the label. An image can be cropped to a thin strip that shows the wrong part. Boxes that overlapped on a laptop can overlap on a phone too, with the header covering the first line of the hero.

• Open the live address on a phone in a private window. Is the first heading cut off by the header bar?
• Does the main heading wrap onto several short lines?
• Look at each button. Are its words broken across lines, or cut at the edge?
• Scroll the whole page. Do any two blocks sit on top of each other?
• Open the mobile view in the editor and compare it with the phone. Do they match?

A phone visitor sees the mobile view, which the editor lets you arrange apart from the desktop view. Many owners edit only the desktop, check it on a laptop, and assume the phone follows. Changes made in one view do not always carry to the other, so the phone can keep an old size or position while the laptop looks right. Open the phone view and check the first screen before you read anything else on the page.

The check is simple. Open the mobile view, then open the live address on a phone and compare the first screen. If the editor already shows the problem, the fix is in the editor. If the editor looks fine and the phone does not, the cause is outside the layout: a font that did not load, an old copy of the page, or something the live site loads that the editor does not show. Those need a different look at the page, not a new layout.

The commonest failures are text size and button width. A heading that looked balanced on a laptop can become a tall stack of short lines, pushing the first button below the fold. A button sized for a wide screen can have its label split across lines, which reads as broken. An image cropped to a set frame shows the middle of the picture on a laptop and the top edge on a phone, which can hide a face or a product.

The wrong fix is to shrink everything on the desktop, which makes the laptop worse and the phone only slightly better. The right fix is to set the size of each heading, text block and button in the phone view, then check each one at phone width. Give the button a full-width shape and a label that fits on one line, and set the image frame to the part of the picture that matters to a buyer.

Give Mimiq the home page address and one task a visitor would have: find the opening hours and the address on your phone. Simulated visitors use phone browsers and scroll the page from top to bottom, and the test takes a screenshot at each step. The report shows what was cut off, overlapped or too small on each screen, with the step where it happened.

The test shows what a phone reveals: a heading cut off by the header, a button label that wraps, a picture cropped to the wrong part. It cannot judge whether a buyer trusts the look, which is a judgment for people. Use the screenshots to find the broken parts, then show the finished page to two or three people who match your buyer and ask what they expected to find first.

Rerun the same phone task after you add a section, change a font, swap an image or edit the header. A section that looks balanced on a laptop can overlap the next one on a phone, and nothing warns you about it. The same task from the same first screen shows the change before a visitor does.