All Templates are created and tested to be mobile responsive. However, making certain changes on the page such as adding a new object or changing container settings, may affect the pages' ability to be mobile responsive.
To ensure that every element on the page is mobile responsive, follow these guidelines:
- Make sure that the object is inside a container (the container must be within the *main* container).
- Make sure that the container is set to "auto-adjust"
- At times, the object's padding may affect how it looks like on a smaller screen. To fix it, adjust the padding towards the LEAST for better results.
Below are some examples on how to fix mobile responsiveness issues:
- The image bleeds out from the screen or does not fit screen properly
- Watch Demo
- image must be set to automatically determine size
- image must be inside a container
- that container must be set to "auto-adjust"
- Containers around that container must also be set to "auto-adjust"
- if there are 2 images in the row, select the main container and set to "adjust automatically"
- use the "padding" option to adjust margins around the image to make it look even inside a colored container
- The text appears too narrow in the screen or the padding around is too wide
- Watch Demo
- Adjust the padding of the container of the text and make it on the LEAST adjustment if you can without sacrificing the design too much.
- The text does not fit the screen or bleeds out from the screen
- Watch Demo
- don't edit the existing problematic text
- Create a fresh container make sure it's no inside another container, drag a new text / headline, it's best to do it far away from the section with the issue. Sometimes you may need to type in the text instead of copy and pasting it
- adjust the padding to be the least setting
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 your Page Editor, but it will not be aligned when viewed on a different sized screen. Instead use the alignment options found at the sidebar.
2. Using the up and down arrows to align objects side by side inside a single container - Use a 2 column container instead, place one of the objects 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 in the page, just remove it.
Comments