Editing the Mobile or Tablet Version of your Page in Smart Builder


Smart Builder’s responsive layouts and grid system automatically create landing pages that align and center to scale perfectly on any device. In other words, pages created with Smart Builder are entirely responsive! 

This article will explain how to: 

About Responsiveness in Smart Builder

At this time, there are three breakpoints in Smart Builder. This way, visitors on different devices such as mobile phones, tablets, and desktops, will see a landing page custom to their screen size. The three breakpoints are: 

  1. 425px or smaller (e.g., mobile devices), 
  2. 426-768px (e.g., tablet devices), and
  3. 769px or higher (e.g., desktop devices). 
    • Do note that the background of your landing page can stretch to the edges of the page. However, the max width of content for a page section is 1200px.

Toggling Between Different Screen Sizes in Smart Builder

  1. Navigate to your landing page in the Smart Builder.
  2. At the top right-hand corner of Smart Builder, locate the Desktop desktop-version icon.
  3. Click the arrow to toggle the drop-down menu, and select the Tablet or Mobile mobile-version icon:
  4. To toggle back to the desktop version, click the arrow again and select the Desktop desktop-version icon from the drop-down menu.

Changing the Layout of the Mobile or Tablet Version of your Page

  1. Navigate to the mobile or tablet version of your landing page in Smart Builder.
  2. Locate the section you’d like to change to a different layout.
  3. Click near the bottom of the section. Section formatting options will appear.
  4. Select the Change Layout button:
  5. A new window will appear at the bottom of the page with different section templates to choose from.
  6. Choose a section template to apply it to the current version of your page.
    Changing the template in the mobile version or tablet version will not affect the template on the desktop version.

Save and publish your page when you’re happy with these changes. To preview your page, see toggling Preview mode in Smart Builder.

Will making edits to the mobile or tablet version impact the desktop version?

At this time, the following edits made to the mobile or tablet version will also change the desktop version, and vice versa: 

  • Updating the text, such as editing content in headings, paragraphs, buttons, and
  • Deleting a section. 

All other changes will not. 

Instead of deleting a section, hide it from that version via the Content tree, as explained in the next section of this article.

Hiding Elements in Smart Builder

Sometimes, you may want to hide or show certain elements on the mobile or tablet version, but show them on the desktop version, or vice versa. Instead of deleting the section, hide it from view instead!

Keyboard Shortcut to Hiding elements

For a short-hand way to hide elements, single-click the element on your page, and press Command + shift + H on your keyboard. This will hide the selected element from view. 

Hiding Elements using the Content Tab

  1. Navigate to your landing page's mobile or tablet version in Smart Builder.
  2. Navigate to the Content  tab within the Smart Builder header.
  3. A hierarchical list of all elements on your page will appear within the Content tree.
    • For example, this Hero section contains nested elements such as texts, buttons, images, and so on:
  4. Click the eye icon to the right of the element to hide it from that view:
  5. When hiding an element from one view, the element will be hidden in another view:

Preview the Different Versions of your Landing Page

To preview the mobile, tablet, or desktop version of your landing page, navigate to the header of the Smart Builder & click the toggle button to switch to Preview mode.

Be sure to Save and Publish your page to finalize the changes.

Do you agree or disagree with this statement: This article helped me find the information I needed quickly and easily.

Select an option and leave us some feedback in the comments:

Strongly DisagreeDisagreeSomewhat DisagreeUndecidedSomewhat AgreeAgreeStrongly Agree

Measuring Customer Effort Score with Nicereply