Solving Horizontal Page Drift in Responsive Pages

When it comes to testing out your EverWeb created responsive pages you may, under certain circumstances, find that your page doesn’t quite fit correctly on the device it’s being displayed upon. The problem is often that there’s some horizontal play in the page rather than it being fixed properly to the width of the device.

This can become frustrating but there are reasons why this happens and it’s actually relatively easy to cure once you know how.

Know Your Page Widths
The key to the problem of a page having ‘horizontal width drift’ is that the page width is actually too wide for the device it’s being displayed upon. For example, an iPhone SE has a width of 320 pixels, an iPhone 8 is 375 pixels wide whilst an iPhone 8 Plus is 414 pixels wide. Keeping these page widths in mind whilst developing your page will help you when it comes to testing the page. Knowing the widths of desktop pages is less important in this respect except when you have objects too widely spaced out which we will cover in a later blog.

Use Your Browser’s Responsive Design Preview Features
Many browsers come with a responsive design mode feature. Using this will help in testing to see if your page is always at the correct width. Apple’s Safari is a good browser to use as it caters for Apple’s current hardware line up from iPhone SE upwards. To enable this feature in Safari, go to the Safari-> Preferences menu. Click on the Advanced button and then tick the ‘Show Develop menu in menu bar’. Close the preferences. The ‘Develop’ menu will now appear in Safari’s menu bar. If you select the menu you will see the ‘Enter Responsive Design Mode’ menu option. You will use this to test your responsive pages.

Designing Your Page
When designing your page, decide which is the smallest type of device you want your page to be designed for. Usually this will be the iPhone SE, but you may want to start with the iPhone 8 (which is the same width as devices such as the iPhone 6 and 6s). As mentioned above, you will have either 320 or 375 pixel width to play with. In my example, I am going to use the 320 pixel wide iPhone SE.

Not Setting Full Width Can Be The Problem!
You won’t need to worry about this number when adding full width objects to the page as they automatically resize to the screen width available. One common problem I have come across is where users inadvertently leave the ‘Full Width’ checkbox unchecked in the Metrics Inspector. This usually happens when using the Responsive Row widget. For example, if you are placing a full width widget inside of the Responsive Row widget, such as a Text Section, FlexBox or Navigation Menu widget, make sure that the widget is set to ‘Full width’ in the Metrics Inspector. What happens if you don’t is that the object inside of the Responsive Row widget will be treated like a fixed width object. So, if using a Navigation Menu widget that is 900 pixels wide, on an iPhone SE you’ll be able to scroll horizontally up to that value.
Therefore, either reduce the width of the Navigation Menu widget to less than 320 pixels, or make it Full Width, or use the widget’s ‘Responsive Navigation Bar’ option and adjust the ‘Appear at width’ value to suit your needs.

Working with Widths within Widgets
Using widgets, such as the FlexBox and Text Section widgets, gives your pages great flexibility of design. However, you still need to be careful when sizing objects to make sure that they fit within the (in this example) 320 pixel width for an iPhone SE. The beauty about the FlexBox and Text Section widgets is that their Widget Settings allow you to set Minimum Width and Default Width values. In this way, your images will scale properly in the context of the device they’re being displayed upon.
For example, I have a FlexBox widget with a main image and text below it. To create this page so that it suits all device sizes:

1. Add the FlexBox widget to the page.
2. In the Metrics Inspector, set the ‘Margins’ Left and Right to 30 pixels. Notice that the Full Width checkbox is ticked.
3. Go to the Widget Settings of the FlexBox widget. In the ‘Embedded Objects’ section, click on the ‘Add’ button.
4. Name the Embedded Object as you want and then select ‘Image’ from the ‘Object Type’ dropdown menu.
5. Choose the image you want to add using the Image ‘Choose…’ button in the ‘Image Settings’ section.
6. Add the text that you want in the Styled Text Editor in the ‘Control Content’ section. Style as required.
7. In the ‘Object Sizing Options’ section, set the ‘Default Width’ and ‘Minimum Width’ values for the image at something less than 320. In my example, I will use 240 pixels. I will also set the ‘Spacing’ value at 10 as I want a bit of space between the image and my text. The reason for setting the minimum width at 240 is that I have to include the Spacing of 10 and each 30 pixel margin into my minimum width calculation. Out of my 320 pixels available, I have to deduct 70 which leaves 250 for the image. Using a value of 240 is therefore perfect for my example as 240+30+30+10=310 which is less than 320.
8. For my page, I also set a ‘Maximum Width’ value of 1000 pixels.

When finished, preview the page in Safari’s Responsive Design Mode. Check that the page fits properly horizontally on each page on all devices.

Tips on How to Avoid Horizontal Page Drift
Here are some tips on how you can avoid horizontal page drift in your responsive pages…

1. Is Full Width checked or unchecked correctly?
2. Have you added any margins to the full object that you need to add in to your calculations of minimum image size width?
3. Have you added any spacing in the Widget Settings of the Responsive Row widget or other Full Width widget that may need to be accounted for in your calculations of minimum image size width?
4. Is the image size going to fit within the size of the smallest device’s maximum pixel width?
5. Check other full width objects on the page in case they are causing the problem. Don’t forget also to check your Master Pages too!
6. If you have multiple objects in a Responsive Row widget, you will also need to consider their widths too. These objects too will need to be able to fit within the smallest device width. In this case, you may need to use ‘Show on Device’. For example, if you have Text Section widgets that are 350 pixels wide in a Responsive Row widget, this will be fine except for the smallest iPhone. In this case select the widget and uncheck Show on Mobile in the Metrics Inspector. Create substitute Text Section widgets that are 280 pixels wide and check ONLY ‘Show on Mobile for these substitute widgets so that your Text Section widgets always scale correctly.

Using the above method should help you design great pages that don’t drift horizontally when viewed on smaller devices!