Page is Shifting Horizontally

Version 14

    When building responsive sites, many Muse users run into this issue:

    • In browser view a page can be shifted horizontally and doesn’t stay completely visible on the screen. This tends to happen mostly – but not always – on mobile devices.

    Here you can see one example for this issue:

     

     

    There may be many different reasons for this problem. Most of them can be fixed easily.

     

    1. Normally this issue is caused by (invisible or transparent) elements, which overlap or are positioned outside the defined breakpoint/page width:
      Element-bleeding-outside.jpg
      –> You definitely have to avoid, that elements overlap or are positioned outside your defined page/breakpoint widths. Browsers don’t like that and will punish you by showing this „horizontal shifting issue“.
      The best way to detect such elements:
      • Zoom out considerably, choose menu „Edit/Select All“ and verify, if there are misplaced elements:



      • Check this for every layout page, every master page and every breakpoint in your document.
    2. Sometimes elements start „bleeding“ outside the breakpoint/page width, while resizing the browser window. To check this in Muse, set your document guidelines and frame borders visible and drag the scrubber (this grey, vertical handle top right of the breakpoint bar) slowly inwards to verify, if there are elements bleeding outside the breakpoint/page width – just as you can see here:

     

    Take care: Often such misbehaving elements aren‘t visible at first glance. May be you are dealing with element within a closed Accordion widget or an actually not visible composition target or something similar.

    If you encounter a behaviour like this, you should be able to correct it by

      • setting these „misbehaving" elements to fluid width,
      • making them smaller in width and/or
      • correct the pinning settings:



    1. If these recommendations don’t fix your issue, delete all 3rd party widgets one by one and check, if the issue remains. Very often, 3rd party widget are the culprit for horizontal shifting issues.

     

    If you have checked these 3 possible reasons, and you don’t find a solution, do the following:

    • Share a small(!) .muse file with only one page and only some elements with us, so that we can have a look at it. Please make your file as small as possible to reduce the time, needed for download and analysing. Moreover: When you reduce your file by yourself (if you don’t, we have to do it), there are good chances, that you’ll find the issue by yourself – and this certainly is the best and most sustainable way to fix a problem! If you want us to check your .muse file, share it using Dropbox, CC Files or a similar file sharing service and post the download link in your forum thread. Please follow these instructions: https://forums.adobe.com/docs/DOC-8652