How-to: Eliminate Extra White Space on the Right in Mobile Trip Page View

If you are seeing a blank space on the right margin when viewing your Trip Page on a phone, it could be a content issue.

When accessing your Trip Page on a mobile browser or in the YouLi App, if there is a large blank space on the side of the page, it may be due to:

1. Fixed width settings for images on the Trip Summary
2. or a non-breaking space with a hardcoded width in the HTML that you can't easily see

1. Go to the trip, then Update Trip -> Overview
2. If you have the images under the TRIP SUMMARY, click the image icon after selecting the image to open the popup
3. Check if your image width is set to a fixed number, in this case 600:
   
4. We recommend changing them to a percentage value so it works on Desktop and Mobile screens.
   
5. Save the change and check if the issue has been resolved.

Check for hardcoded elements in the HTML

1. When large blank spaces appear on the page, you can first use the browser Inspect tool to identify the problematic content.
   1. Example:
   2. 
   3. If you aren't sure what this means, continue with this checklist and do your best to remove the extra spaces.
      
      
2. Edit the content with the extra spaces
3. Look for any big spaces, especially those that might contain non-breaking spaces  
4. Look for things that impact the page layout, like style = "margin-left:400px". You can troubleshoot by deleting or modifying these values.
5. Save the changes and refresh the page to verify if the issue has been resolved.