What you need to know
In the visual on the right, you can see how images will appear on different devices. When using a landscape image on a portrait device (like a mobile phone), the sides will be cut off. When using a portrait image on a landscape device (like a desktop), the top and bottom will be cut off.
Make sure that you have two versions of each background image: a landscape and a portrait one. If you have a photographer you can instruct, ask them to shoot both versions. If you do not have a photographer, choose two pictures yourself or crop the landscape version to a mobile/tablet friendly version. Cropping can be done in the editor, using the cropping tool in your Media library.
You can determine the focus of your image by using the focus grid. You can find this option in Desktop view: go to Block Settings > Background > Background Focus.
Margins and paddings
When you start creating your publication, you start with the Desktop view. You can use the Column Alignment option to position your text and images (horizontally and vertically) and fine tune them with margins and paddings. Use margins and paddings only to fine tune!
On a portrait device like an iPad or mobile phone, all the columns will be displayed under each other. Be aware of that! However, you can easily rearrange columns on mobile/tablet to prevent the situation below (text - image - image - text):
This one can be tricky! Luckily, your problems are solved when you upload an alternative image for tablet/ Mobile portrait, and position the hotspots separately.
Visibility (blocks, images and buttons)
If there is a block, image, or button you don't want to show on a specific device, you can use the Visibility option.
Fullscreen Background Video
You can insert two kinds of video in your publication:
- A Video Element that starts when you click the play button
- A Fullscreen Background Video that starts playing automatically when you open the page
The Fullscreen Background Video doesn’t work on mobile (because the mobile providers have blocked it) or on iPads (iPad doesn’t support flash, which is needed for the autoplay).
So: when you have a Fullscreen Background Video, you’ll have to create an overlay as well. In that overlay, you can insert the same video but as an element. Use a strong call to action when naming the button, such as ‘Watch the video’ and hide it from the Desktop view with the Visibility option mentioned above.
Tablet and mobile (portrait) view in the editor
You can fine tune your publication by clicking the Desktop icon in the top middle of your editor screen and selecting Tablet and Mobile view.
Finetune margins and paddings
Make adjustments by adding some margins and paddings. You can push your content up, down, to the left, and to the right so your background picture is in the correct position and text doesn’t cover important parts of the image.
By adding some padding to the top of your page, you can prevent the page title from being overlapped by the navigation bar. You might have to hide the navigation bar (Desktop icon > Show navigation: off) in order to properly change this padding.
When you have a block with background image only (no text), it might look very small on mobile and mablet because there is no content in it. Drag padding into the block to increase the hight, so that the image is fully visible.
Finetune font size
You can resize fonts so that your titles will fit on every device, even the smallest ones! You can do this by clicking a text field and resizing the text in the (styling) bar that appears on top of the page. It’s also possible to give your font a different color. It will not affect the styling you have on the other two devices.
The mobile view is a general size. It is wise to check your publication on your own (real!) phone as well. An iPhone 5 is the smallest device you should check. Words with many characters sometimes don’t fit on that device, so you could decrease the font size for mobile. The desktop and tablet versions will keep their original font size.
You can edit the Theme for each viewport by opening the theme in that viewport.
By going to tablet/mobile view, you can also replace the background image of a block.
This can be useful when you have an image with, for example, a person on the left and a person on the right. Only one person will fit on a portrait device. Therefore, you need an image where the two people are closer together. As mentioned before, please make sure you have two photography options (landscape and portrait), so you have an alternative for both mobile and tablet.