Once you’ve perfected your desktop layout, it’s time to ensure it looks just as stunning on smaller screens. When you switch over to edit the mobile version of your page, you have the freedom to fine-tune the layout specifically for smartphones and tablets.
While most of your content and structure will seamlessly carry over from the desktop version, you can independently adjust certain design properties—like text sizes, spacing, and image alignment—specifically for the mobile viewport. This ensures your mobile visitors get a perfectly tailored experience without altering the hard work you just did on the desktop design.
NOTE: Some of the features described in this article have been released to a limited audience. Reach out at help@instapage.com to verify or request access.
Understanding Device-Specific Changes
When designing your webpage, certain layout and styling adjustments are device-specific. This means any changes you make to them will only apply to the active screen view (Desktop or Mobile) you are currently editing, allowing you to tailor the mobile experience without breaking your desktop layout.
The following settings change only for the device size you are currently viewing:
For All Elements: General sizing and spacing (Width, Height, Padding), text formatting (Font Size, Line Height, Text Alignment), list styles (Marker Size and Color), and Custom Styles.
For Forms: Form field label font sizes.
For Images: Image sizing (Height, Width), background image positioning (Size, Position), and top spacing (Top Margin).
Always check your editor's top bar to ensure you are in the correct device view (Desktop or Mobile) before adjusting these specific settings!
For example, if you have a form on your page, the general style of the form will be the same, but the font size can be adjusted individually for Desktop and Mobile.
Adding New Elements in Mobile View
Need to add a new section, text block, or image while tweaking your mobile layout? You can absolutely do that—just keep in mind how the editor handles new content:
Page-Wide Additions: When you add a new block or widget while in the mobile view, it is added to the entire page, meaning it will also appear on your desktop version.
Creating Mobile-Only Content: If you want a new element to be visible only on mobile devices, simply right-click the element after adding it and choose your desired visibility settings to hide it from the desktop layout.
Desktop/Mobile visibility
Visibility on Desktop/Mobile can be toggled from the individual settings of each page element.
When you select an element, the highlighting around it signifies its visibility:
- Blue - The element is visible on both Desktop and Mobile.
- Orange - The element is only visible in the mode you are viewing.
Switching on the Show hidden toggle at the top of the page will highlight the elements that have been hidden on the version of the page that you are on. You can scroll up and down the page to find those elements, and if you want one of them to be visible, right-click on it, then click the Restore button.
More information about Desktop/Mobile visibility can be found here: https://d.pr/Gqt2YH
Resetting and Fixing Your Mobile Layout
When moving things around or adding new elements on mobile, you might occasionally find that your layout feels disorganized or cluttered. If you want a fresh start, you can use the Regenerate button.
What it does: Clicking the Regenerate button completely resets your mobile layout to match the structure of your desktop version. The editor will take all of the content from your desktop page and automatically reorganize it into a single, clean column optimized for mobile screens.
When to use it: This is perfect if you’ve added several new page-wide elements that appear disorganized, or if an element added to the desktop version later in the design phase cannot be found on your mobile page.
Because this tool acts as a reset, regenerating your layout will wipe out any mobile-specific custom tweaks you previously made (such as custom mobile paddings, hidden elements, or adjusted font sizes). Use Regenerate Block instead of regenerating the whole page, and use it when you want a clean slate to quickly re-align your mobile content with your desktop design.
More information about the Regenerate tool can be found here: https://d.pr/M6m11K
Optimizing Images for Mobile
Images that look stunning on a wide desktop screen might not always fit perfectly on a tall, narrow mobile screen. If your design team has created two different versions of an image to solve this, you have two flexible ways to handle it in the editor:
For Block Backgrounds: If your image is set as the background of an entire block, you can simply change the image while in the mobile view. The editor allows you to swap out the background image for mobile independently, without changing the background image on desktop.
For Standalone Image Elements: If you are using a standard image widget rather than a background, you can use the visibility toggle. Simply add both images to the page, right-click each one, and adjust the visibility settings so that the desktop version is hidden on mobile, and the mobile version is hidden on desktop.
By using these methods, you can ensure your visual assets look crisp and beautifully composed, no matter which device your visitors are using!