The Viking StackKnowledge Base

Layout looks wrong on mobile or a specific browser

Fix pages that look broken on phones or in one browser: responsive settings, hidden-on-mobile elements, column stacking, and custom CSS conflicts.

6 min readintermediateUpdated September 9, 2026

A page that looks great on your desktop editor can look completely different on a visitor's phone — overlapping text, images cut off, buttons stacked in the wrong order, or elements that shouldn't be visible showing up anyway. This is almost always a settings issue specific to mobile view or a specific browser, not a bug in the page itself.

Symptoms

  • Text overlaps images, or elements are stacked in the wrong order on phones.
  • Something you hid is still visible on mobile (or desktop).
  • Columns that should sit side by side on desktop don't stack cleanly on mobile — they overlap or leave huge gaps.
  • Font sizes, spacing, or button sizes look fine on desktop but oversized or tiny on phones.
  • The page looks correct in Chrome but broken in Safari (or vice versa).
  • Images are blurry, stretched, or cropped incorrectly only on mobile.

Likely causes

  1. Desktop and mobile views are edited separately, and mobile wasn't checked. The builder has an independent mobile view editor — changes made only in desktop view don't automatically carry over to how mobile renders, especially for spacing, font size, and element order.
  2. Visibility settings are set per device. Elements can be individually hidden or shown for desktop vs. mobile. It's easy to hide something for one view while testing and forget to re-enable it for the other.
  3. Custom CSS targets the wrong breakpoint, or conflicts with the builder's own responsive rules. CSS you added to fix one screen size can unintentionally break another if it isn't scoped to a specific breakpoint.
  4. Column/section width settings don't leave room to stack. Columns set to fixed pixel widths instead of flexible/percentage widths can fail to stack cleanly on narrow screens.
  5. Image settings differ between desktop and mobile. Image cropping, sizing, and optimization can be set independently per device, and a setting that looks fine on a wide desktop image can crop the wrong part of the image on a narrow mobile view.
  6. Browser-specific rendering differences. Safari, Chrome, and Firefox interpret some CSS properties slightly differently (especially around fonts, flexbox, and sticky positioning) — a page can be technically correct and still render with minor differences across browsers.

Step-by-step fixes (most common first)

1. Check the actual mobile view in the editor, not just a resized browser window

Open the page in the builder and switch to the mobile view (usually a device icon toggle in the toolbar). Changes here only affect mobile — this is the first place to look, and the first place to fix things, since editing in desktop view won't touch mobile layout.

The builder toolbar with the desktop/mobile view toggle highlighted

2. Review visibility settings on the affected element

Select the element that's wrongly showing or hidden, open its Advanced Settings, and find the Visibility section. Confirm the toggle for each device (desktop, mobile, and tablet if available) matches what you actually want. It's common to hide something for mobile while designing and never turn it back on, or the reverse.

3. Fix column stacking with flexible widths

If columns overlap or leave odd gaps on mobile instead of stacking cleanly, check the section or row's width settings. Prefer flexible/percentage-based widths over fixed pixel widths so columns can naturally reflow to full width and stack vertically on narrow screens. Also check the column order setting in mobile view — you can often reorder how columns stack on mobile independently of their desktop order, which is useful if a sidebar should move below the main content on phones.

4. Adjust font size and spacing specifically for mobile

Select the text or button element, switch to mobile view, and adjust font size, padding, and margin there directly rather than assuming the desktop values will scale down proportionally. Large desktop padding values in particular tend to look oversized on a small screen if not reduced separately.

5. Re-check image settings per device

Open the image element's settings and look for separate desktop and mobile controls (crop focus point, object-fit behavior, optimization). If an image looks cropped wrong or blurry only on mobile, adjust its mobile-specific crop/focus settings rather than the desktop ones.

6. Isolate custom CSS as the cause

If you've added custom CSS to the page or a specific element, temporarily disable or remove it and re-test on mobile. If the layout fixes itself, the CSS is the cause — check whether it uses a media query that's excluding or wrongly including certain screen widths, and scope it more precisely (for example, targeting max-width: 767px for mobile-only rules rather than applying a rule globally).

Note: Custom code you add is your responsibility to test across devices — the built-in responsive system handles default layout behavior, but custom CSS can override it in ways that only show up on specific screen sizes.

7. Test the specific browser reported

If the issue is browser-specific rather than device-specific, open the live page in that exact browser (not just a similar one) and use its built-in developer tools to inspect the affected element. Look for properties that render differently — flexbox gaps, sticky positioning, and custom fonts are the most common culprits across Chrome, Safari, and Firefox.

How to verify it's fixed

  1. View the live published page (not the builder preview) on an actual phone if possible, not just a resized desktop browser window.
  2. Check both portrait orientation and the most common phone screen widths if you can test more than one device.
  3. Confirm visibility settings match intent on both mobile and desktop.
  4. Re-test in the specific browser that was originally reported as broken, using a private/incognito window to rule out cached styles.
  5. Have someone else check on their own device, since emulated "mobile view" in a desktop browser doesn't always match a real phone exactly.

When to contact support

Contact support if a layout issue persists after checking mobile view settings, visibility toggles, column width settings, and with all custom CSS temporarily removed — meaning the default, unmodified builder output itself renders incorrectly. Include:

  • The exact page/funnel step URL.
  • The device, browser, and OS version affected (e.g., iPhone 15, Safari, iOS 18).
  • A screenshot or screen recording of the broken layout.
  • Whether the issue also happens with all custom CSS/code disabled.
  • Whether it happens in the mobile view inside the builder too, or only on the live published page.

Frequently asked questions

Why does my page look fine on my phone but a customer says it's broken on theirs?

Screen widths vary a lot even among phones. A layout that stacks cleanly at one width can overlap at a narrower one. Check the layout at a few different widths using your browser's device toolbar, not just your own phone's exact model.

Do I need to build mobile and desktop separately from scratch?

No. The builder generates a responsive mobile layout automatically from your desktop design — the mobile view lets you fine-tune spacing, sizing, order, and visibility on top of that starting point, not rebuild the whole page.

Is it normal for fonts to look slightly different across browsers?

Yes, small rendering differences in font weight and spacing between browsers are normal and generally not worth chasing pixel-for-pixel unless the difference is significant enough to affect readability or layout.

Should I use fixed pixel widths for more control?

Fixed widths give you more precise control on one screen size but are the most common cause of broken mobile stacking. Prefer percentage or flexible widths for columns and reserve fixed widths for small elements like icons or buttons.