By default, your SnapPages site will be tablet/mobile-friendly. Although you are creating the site on a desktop view, any block/section you add will automatically scale down when viewing your site on a mobile device. There are cases where your desktop view of the site may not translate well on mobile devices, but throughout the editing process, you can switch between previewing your site on desktop, tablet, and mobile all within the editor to make minor adjustments.
Throughout this article, we want to go over best practices for building out your site for mobile viewing.
Rearrange Block Placement
You can jump into mobile view to re-arrange blocks without affecting your desktop view.
All formatting will stay the same, you are only moving the placement of the block.
While in the page editor, you are able to switch to the mobile view of your site. This will give you a look at how all your blocks and sections will be displayed on a mobile device. Snappages will always do its best to arrange the content to match your layout of desktop view but it is not always 1 to 1.
All you have to do is switch the view on the left-hand side to switch to mobile or tablet view. Here you'll be able to make the necessary changes.
Too Much Horizontal Padding
If your mobile site looks like this :
It is because of horizontal padding. Too much padding on the section would result in the mobile view looking very compressed.
Go to your section options and lower the horizontal padding the original setting would be around 25px.
If you would like to have your text center, you look into enabling the limit width option for those blocks.
Background Images not Scaling
When setting up background images for your sections, keep in mind that the blocks within the section will scale down for mobile but not the background itself. You can change the background section options to "Scale to fit" so the full image can be scaled down, but keep in mind, that this may make the image very small on mobile viewing.
Additionally, when adding a video background, you can set a mobile image instead of the video background. This will be found in your section options background settings.
Check out our article on Background Image Sizes to learn more about our recommendations on background sizes.
Utilizing the "Hide From" feature.
Every block and section can be hidden from specific views. This can be useful when you want to use a full background for your desktop and have to worry about the mobile view distorting or cropping the image/video background drastically.