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


Check the Trip Summary image settings

To locate the content that is causing the problem, first check if you have any images under Update Trip -> Overview -> Trip Summary 
If you do, check whether they have hardcoded width set and switch to % so it works on Desktop and Mobile.
  1. Go to the trip, then Update Trip -> OverviewScreenshot 2024-03-04 at 11.35.03 am
  2. If you have the images under the TRIP SUMMARY, click the image icon after selecting the image to open the popupScreenshot 2024-03-04 at 12.55.22 pm
  3. Check if your image width is set to a fixed number, in this case 600:
    Screenshot 2024-03-04 at 3.03.33 pm
  4. We recommend changing them to a percentage value so it works on Desktop and Mobile screens.
    Screenshot 2024-03-04 at 3.03.25 pm
  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. Screenshot 2024-03-04 at 1.07.42 pm
    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.
Screenshot 2024-03-04 at 1.12.46 pm

CAUTION: Be aware that pasting content from document editors like Word often adds these special characters you cannot see. We recommend cleaning up the content in a plain text editor before pasting it into YouLi.

Still Having Trouble?

If you're still unable to resolve the issue after following the steps above, please open a support ticket to contact us.

When submitting the ticket, please clearly describe on which menu sub-tab of the Trip Page the issue occurs, so we can quickly help you resolve the problem.