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:
- Toggle Between the Mobile & Desktop View
- Editing of the Mobile Version
- Hiding Elements in Smart Builder
- Preview the Mobile Version of your Landing Page
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:
- 425px or smaller (e.g., mobile devices),
- 426-768px (e.g., tablet devices), and
- 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
- Navigate to your landing page in the Smart Builder.
- At the top right-hand corner of Smart Builder, locate the Desktop
icon. - Click the arrow
to toggle the drop-down menu, and select the Tablet 
or Mobile 
icon:
- To toggle back to the desktop version, click the arrow again and select the Desktop icon from the drop-down menu.
Changing the Layout of the Mobile or Tablet Version of your Page
- Navigate to the mobile or tablet version of your landing page in Smart Builder.
- Locate the section you’d like to change to a different layout.
- Click near the bottom of the section. Section formatting options will appear.
- Select the Change Layout button:
- A new window will appear at the bottom of the page with different section templates to choose from.
- 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
- Navigate to your landing page's mobile or tablet version in Smart Builder.
- Navigate to the Content tab within the Smart Builder header.
- 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:
- For example, this Hero section contains nested elements such as texts, buttons, images, and so on:
- Click the eye
icon to the right of the element to hide it from that view:
- 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.
