Our primary focus when creating our mobile-responsive feature was to ensure that the desktop and mobile views were fully functional and completely customizable across as many devices as possible, with minimal work on our customers' part.
Responsive Layouts in Smart Builder
There are three viewports in Smart Builder: mobile, tablet, and desktop versions of your landing page.
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).
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.
To create fluid responsive landing pages in Smart Builder, see Editing the Mobile or Tablet Version of your Page in Smart Builder to learn more.
Responsive Layouts in Classic Builder
There are two viewports in Classic Builder: mobile and desktop versions of your landing page.
- The breakpoint is 600px (when the landing page's view switches from desktop to mobile).
Any device with a viewport width wider than 600px will see the desktop version of your landing page, and any device smaller than 600px will see the mobile page.
What about a tablet device?
Since the default breakpoint is 600px, a device with a viewport wider than 600px will see the desktop version of your landing page, and a device with a viewport smaller than 600px will see the mobile version.
So, the desktop version will be rendered and scaled to fit your tablet device's entire screen.
Rest assured, all the content will still display on the tablet's screen. This will ensure that your traffic's vast majority will have access to a version of your landing page that your users can see and use without issue.
To learn more about editing the mobile version of your page in Classic Builder, see these articles: