Fluid Grid Blocks
The fastest and easiest way to ensure you have responsive pages is to use Fluid Grid Blocks. You can add one by clicking on Insert Block > My blocks > Fluid Grid Block. These blocks are made up of containers that automatically resize content to be responsive.
To learn more about customizing container margins and other Fluid Grid Block settings, please visit the dedicated article here: https://d.pr/4DSneB
What is the responsiveness limit for the desktop version of a page?
The pages you build with Instapage are responsive up to 1200 pixels in width, meaning that elements you add in that range (600 pixels to the left and 600 pixels to the right, measured from the center of the page) will move/scale when the browser window is smaller or when it is manually resized. There are two sets of guidelines: the grey one for 960px width and the blue one for 1200px width. Please refer to the screenshots below. The inside column represented by these guidelines cannot be changed.
1. Screenshot with the contrast changed so that you can notice the guidelines better:
2. Screenshot in original colors, as you will see them in the builder
You can zoom out using keyboard shortcuts (Cmd- / Cmd+ on Mac or Ctrl- / Ctrl+ on Windows) to see both at the same time.
If you are zoomed in and the outer lines are not visible, you can click-and-drag the page instead of scrolling by first holding down the space bar on your keyboard.
What is the size of the mobile canvas?
The width is 400 pixels. The mobile canvas represents the surface area in which you can place the elements on the page.
What is the mobile breakpoint?
The landing page is responsive to the visitor's screen size. When it detects that the browser is wider than 768 pixels, then the desktop version of the page is shown. When it detects that the browser width is below 768px, then the mobile version of the page is shown.
This means that if you manually resize your desktop browser window to have the size of a mobile one, the page will adapt and start showing the mobile design (if it is enabled).
Taking this into consideration, a tablet held in the portrait orientation will show the mobile version of the page, while a tablet held in the landscape orientation will show the desktop version of the page.
In the image below, you can see a visual representation of how much 400px and 768px are in the builder. (The shapes and text are added as a background image on the Instablock - only the background image of the block will be displayed between 400px and 768px)
NOTE: To have your page display the mobile version, please make sure the toggle for Mobile is turned on.