Edit a Page for Mobile Screens
Our page templates are built to be mobile-responsive. They automatically adjust to fit the devices you are using to view
the page. The layout and content adapt based on the screen size 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 the 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 on 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 the 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 "center."
5. Check the other views if the alignment remains 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 set to auto-size, its height will remain the same even when the page is viewed on a smaller
screen. This can cause elements in that container to overlap with the next container below.
In this example, the blue container is not an auto-size. It looks good on laptop view, but there's an overlap between
the image and text in mobile view.
To fix this, enable the auto-size feature for the blue container while in mobile view. This will ensure the container
auto-sizes only on mobile devices. When you switch back to the desktop view, the container size will remain unchanged.
1. Click the mobile view icon.
2. Click the container to load the settings.
3. Select "Size."
4. Switch on auto-size or max 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:
1. 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.
2. 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).
3. Using too many containers - if it doesn't have a function on the page, just remove it.
Learn More About Hiding Objects on Mobile View
