Our page templates are built to be mobile responsive, it automatically changes to fit the devices you're viewing the page on. The layout and content adapts based on the size of the screen they are viewed on.
Typically there are four general screen sizes that responsive design has been aimed at. At the bottom right corner of the page editor, you can toggle between these different screen sizes:
Wide Screen
Desktop
Tablet
Mobile
As the screen gets smaller, the content shifts and changes to the best display for each screen.
When customizing page templates, some content may not be adapting the way you want them to when viewed on smaller screens, so in this article you will learn how to adjust them manually.
Adjusting Each View
Before publishing your page, it is best to toggle on all screen sizes to check if the page adapts to all types of screens. If an element in the page is not adjusting on a smaller screen, then make the adjustment on that type of screen.
In this example, the headline text looks good on desktop view, but on mobile view, it looks like the text is too big for the screen.
To fix this, adjust the font size while you're on mobile view. It will adjust the size only on mobile. When you return to desktop view, the original font size should remain the same.
1. Click the mobile view icon
2. Click the text to slide out the settings
3. Adjust the font size
4. Check the other views if adjustment is needed
Object Alignment
If there are objects in your page that you want to have a different alignment when viewed on a smaller screen, just adjust the alignment on that type of screen.
In this example, the logo and headline is left-aligned on desktop view, so naturally, it will be left-aligned on all types of screens.
If you want them to be center-aligned when viewed on mobile but remain left-aligned when viewed on a laptop, adjust the alignment while you're on mobile view. It will adjust only on mobile, when you return to desktop view, the original alignment should remain the same.
1. Click the mobile view icon
2. Click the element to load the settings
3. Select Alignment
4. Adjust the alignment to centered
5. Check the other views if the alignment remained the same
Overlapping
If there are elements overlapping on your page when viewed on a smaller screen, make sure that the element's container is switched on to auto-size.
If a container is on auto-size, its height adjusts to encase all the elements inside the container on any type of screen.
If a container is not on auto-size, its height will remain the same even if the page is viewed on a smaller screen. This will result to an overflow of elements from that container to the next container below.
In this example, the blue container is not an auto-size. It appears to looks good on laptop view, but there's overlapping on the image and text in mobile view.
To fix this, switch on the auto-size of the blue container while you're on mobile view. It will auto-size only on mobile. When you return to desktop view, the container size should remain the same.
1. Click the mobile view icon
2. Click the container to load the settings
3. Select Size
4. Switch on auto-size under height
Columns Per Row
If some of the elements inside the columns move down to the next row when viewed on a smaller screen, just adjust the number of columns per row on that type of screen.
In this example, the social media icons and the countdown timer are all in one row when viewed on a laptop, but when viewed on mobile, only one icon / number appears per row. The rest of the items move down to the next line.
If you want the icons and the numbers to appear side by side when viewed on mobile, adjust the number of columns per row while on mobile view.
1. Click the mobile view icon
2. Click the column to load the settings
3. Click Advanced
4. Select Columns Per Row
5. Set the maximum number of items per row (e.g. 4)
Avoid these mistakes:
Adjusting text alignment manually - Stop adding more space to center your text, it may look centered when you view it on the editor, but it will not be aligned when viewed on a different sized screen. Instead use the alignment settings.
Using the up and down arrows to align elements side by side inside a container - Use a column instead of a container, place one of the elements on the left side and place the other one on the right. You can use the up and down arrows for minor adjustments (if the objects are not the same size or height).
Using too many containers - if it doesn't have a function in the page, just remove it.