# Mobile layout not matching the editor

If a page looks right on desktop but breaks or looks off on mobile once it's live, it's almost always because something wasn't adjusted for that specific breakpoint — not a bug. Work through these checks in order.

## 1. Check Visibility settings

Elements can be set to show or hide per view (Desktop, Tablet, Mobile) — something might be hidden on Mobile intentionally or by accident.

1. Switch the editor to **Mobile** view using the device icons in the top bar.
2. Open the [Page layers](https://docs.foxecom.com/foxify-app/foxstudio/editor-tools/page-layers) panel and scan for a crossed-out eye icon next to any section or element — that flags it as hidden on the current view.

![](https://docs-assets.foxecom.app/faqs-and-troubleshooting/7ed6e567-f742-4b03-9c04-73d99ff328a0.png)

3\. Select that layer, then check **General > Visibility** in the Inspector panel to turn it back on if needed.

![](https://docs-assets.foxecom.app/faqs-and-troubleshooting/57ec7158-7783-4260-812f-455bf9b5ca68.png)

## 2. Check element sizing (Fixed vs. Relative)

A fixed pixel width doesn't shrink for smaller screens — it can push content wider than the mobile viewport, showing up as overflow or a blank strip on the side.

1. Select the element (e.g. Stack, Image, or Text).
2. In the Inspector panel, go to **Design > Size**.
3. Set **Width** to Relative (%) or a responsive value instead of a large fixed px value.
4. Switch between Tablet and Mobile to confirm the fix holds on both.

Learn how to [Resize an element](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/resize-an-element).

## 3. Check constraints

For elements not inside a [stack](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/stack-elements), constraints set for a wider screen can hold an element in a position that no longer makes sense on mobile.

1. Select the element and open **Constraints** in the Inspector panel.
2. Confirm horizontal constraints (left/right) use % and vertical constraints (top/bottom) use px.
3. Adjust so the element stays correctly anchored as the screen resizes.

Learn more about [Constraints](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/constraints).

## 4. Rule out a cached version

Sometimes the live page is already fine — your browser or the CDN is just showing an older version.

1. Hard-refresh the live page (Ctrl+F5 / Cmd+Shift+R).
2. Or open the URL in an incognito/private window.
3. Compare again before assuming something is still broken.

## Still doesn't look right?

Walk through [Check and adjust mobile view](https://docs.foxecom.com/foxify-app/guides/build-your-store-pages/check-and-adjust-mobile-view) for a full pass on responsive design — or contact our support team via chat, or follow [How to report an issue](https://docs.foxecom.com/foxify-app/faqs-and-troubleshooting/faqs/how-to-report-an-issue).

## FAQs

#### Do I need to design Mobile separately from Desktop?

Yes. Foxify doesn't automatically generate a mobile layout from your desktop design — you (or AI Responsive) need to review and adjust spacing, sizing, and visibility for Mobile specifically.

#### Will adjusting Mobile view change my Desktop layout?

No. Changes made to element styles while Mobile is selected apply only to that view; Desktop and Tablet stay as you left them.

#### Why does it look fine in FoxStudio but different on my actual phone?

Your browser or the CDN may be showing a cached version of the page. Hard-refresh, or open the live URL in a private/incognito window, before assuming something is broken.