Lead Gen & CRM
How can we help you?
Search our help articles, video tutorials, and quickstart guides

You've got this. You've got us. Search our Knowledge Base to quickly find answers to your questions.

Edit how Landing Pages Appear on Various Devices

Article: 000050526
Updated: July 10, 2024

Customize the appearance of your landing page on a desktop, tablet, or mobile device

When creating and editing a landing page, you can preview how the page will display on a desktop computer, tablet, and mobile device. You can also edit how the content on your landing page appears on various devices.


Article Contents


Users:
Administrators 
Company Managers 
Marketing Managers 
Sales Managers  
Salespersons  
Jr. Salespersons  

Previewing Landing Pages on Different Devices

You can preview how a landing page appears on different devices. This feature allows you to view content on a desktop, tablet, or mobile device.

To preview landing pages on different devices, at the top of the landing page editor, select one of the following device views:

   •   screen.png  Desktop
   •   tablet.png  Tablet
   •   mobile3.png  Mobile

Device Preview

Note: Any page sections that had the Hide on Mobile toggle turned on will disappear when using mobile view. These sections will only appear on desktop devices.


Editing Content on Different Devices

You can edit landing page content to appear differently on different viewing devices.

To edit content at the device level, create or edit a landing page and then insert desired layouts and elements:

  1. Click the inserted layout or element.
  2. Click the  screen.png  Desktop tab and modify the available settings for the layout or element. 
    Important: Setting changes to desktop versions of content will overwrite setting changes to tablet and mobile versions of content.

    Button Settings Desktop View
     
  3. Click the  tablet.png  Tablet tab and modify the available settings for the layout or element.

    Button Settings Tablet View
     
  4. Click the  mobile3.png  Mobile tab and modify the available settings for the layout or element.
  5. Click Publish.

    Button Settings Mobile View


Note: Certain settings and styles may only be changed in the Desktop tab. These settings will be faded out in the Tablet and Mobile tabs.

Important Information Regarding Desktop Settings Overwriting Other Settings

Making changes to the layout and element settings of the desktop version of a landing page will overwrite changes made to layout and element settings of tablet and mobile versions of the landing page. Make changes to the desktop version of the landing page first before modifying tablet and mobile versions.

However, setting changes made to mobile versions of a landing page do not carry over to tablet or desktop versions of the landing page. In the same way, setting changes made to tablet and mobile versions of a landing page do not carry over to desktop versions of the landing page.

This only applies to content settings. Reordering content in any version of the landing page will reorder that content across all versions of the landing page. Deleting content from any version of the landing page will delete the content from all versions of the landing page.
 



Modifying Images for Different Devices

Images can only take up so much space on mobile devices, as tablet and mobile screens have only so much available real estate. To compensate, you can edit the settings for images on different devices in the Landing Page Builder.

Important: Setting changes to desktop versions of images will overwrite setting changes to tablet and mobile versions of images. Changing image dimensions, links, and placeholder text in one version will change the same across all versions.

To modify image settings, insert an image element into the landing page:

  1. Click the inserted image element.
  2. Click the  screen.png  Desktop tab and modify the desired image style settings.

    Image Desktop Settings.
     
  3. Click the  tablet.png  Tablet tab and modify the desired image style settings.

    Image Tablet Settings
     
  4. Click the  mobile3.png  Mobile tab and modify the desired image style settings.
  5. Click Publish.

    Image Mobile Settings


Hiding Mobile Content

You can hide entire sections from displaying on mobile devices. This allows you to create a fully interactive version of your landing page for desktop devices, and streamlined versions of your landing page for tablet and mobile devices.

Hiding content for tablet mobile devices is as much a strategy and courtesy as it is a point of aesthetic design. These devices may have a harder time loading media-heavy content. In addition, data restrictions for phone or Internet data plans may cause page visitors on tablet and mobile devices to avoid making repeat visits to your pages.

To hide content for tablet and mobile devices, do the following:
 

  1. Double-click the section the inserted layout or elements are in.
  2. Click the Hide on Mobile toggle in any of the device setting tabs.
  3. Click Publish.

    Hide Section on Mobile Devices

     

Note: This feature is unavailable for individual blocks, layouts, or elements.
 


Did this article answer your question?


Constant Contact Logo

Copyright © 2025 · All Rights Reserved · Constant Contact · Privacy Center