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

Follow

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! 

Using the Alignment Settings in Smart Builder will also help you rearrange content on the mobile version without affecting the tablet/desktop versions and vice versa.  

This article will explain the following:

About Responsiveness in Smart Builder

At this time, there are three breakpoints in Smart Builder. This way, visitors on different devices 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

  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:
    toggle-between-desktop-and-mobile-views
  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

To change the layout of a section or group, you can use the Alignment Settings .

  1. Navigate to the mobile or tablet version of your landing page in Smart Builder.
  2. Click on the group or section you want to realign.
  3. Click the Alignment Settings:
    Alignment Settings on left-hand side of Smart Builder.
  4. Click arrows within the Stacking option  or to change the flow of how content stacks on the page:
    Changing the alignment settings within the mobile version.
  5. Now the element will stack on top of one another,
    • Rest assured, changing the layout on the mobile or tablet versions will not affect the desktop version.
  6. Save and publish your page when you're happy with these changes. To preview your page, see toggling Preview mode in Smart Builder.

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

Note:

Some changes to the desktop version will also change the mobile and tablet versions. To learn more, see the end of this article.

Hiding Elements

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!

  1. Navigate to your landing page's mobile or tablet version in Smart Builder.
  2. Click 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 a group that includes a heading, text, button, and image:
      breakdown-of-content-tree
  4. Click the eye icon to the right to hide the element or entire group from view:
    hide-show-elements-on-page
  5. Rest assured, when hiding an element from one view, the element will still appear in another view:
    hide-show-elements-page-desktop-view-vs-mobile-view

Previewing Your 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.

Please be sure to Save and Publish your page so you can finalize the changes.

How Changes Made to the Desktop, Mobile, & Tablet Versions Impact Each Other

At this time, the following edits made to one version will also change the others and vice versa: 

  • Dragging and dropping a new element or section.
  • Updating text, such as editing content in headings, paragraphs, and buttons.
  • Deleting the following
    • A section 
    • A group
    • An element (button, image, paragraph).
  • Changing the Sizing and Spacing (e.g., padding or margins) on the desktop version will flow down and apply to the mobile and tablet versions. 
  • Changing the Alignment Settings on the desktop version will flow down and apply to the mobile and tablet versions. 
  • Moving a section up or down.

At this time, the following edits made to one version will not change the others:

  • Changing the Alignment Settings for the tablet or mobile version.
  • Changing the Sizing and Spacing (e.g., padding or margins) for the tablet or mobile version. 
  • Hiding groups, sections, or elements from one view. 

Related Articles

Refining Layouts, Sizing, and Spacing in Smart Builder

Drag & Drop Elements in Smart Builder