Read this article to learn how to resolve extra spaces in web pages created with Adobe Muse. Fix layout that appears smaller than designed on the intended device.

Issue

For web pages created with Adobe Muse, you may experience the following issues:

  • Extra spaces in web pages created with Adobe Muse
  • Layout appears smaller than designed on the intended device

Read on to know the possible resolutions for this issue.

Solution 1: Look for page items placed outside the page

In the Design view, look for page items that you may have accidentally placed outside the page. You can highlight page items by choosing View > Show Frame Edges or by choosing Edit > Select All. Delete or reposition any page items placed outside the page.

Solution 2: Verify that collapsing or expanding page items are on the page during export

Depending on the content area is in focus, Accordions and Compositions can occupy more space when expanded. Verify that widget content is on the page during export.

Solution 3: Double-check embedded HTML and third-party widgets with predefined sizes

Many embedded HTML and third-party widgets allow you to resize a page item in the
Design view. Many of these page items have predefined dimensions indicated in their code. Therefore, on export some page items might not be the same size as indicated in the Design view.

If this is the case, consult the third party who distributes the embedded HTML/widget.

Solution 4: Verify expanded size of nested page elements

Any nested page items expand the size of its parent container when expanded. Verify that nested items do not expand a parent container beyond the bounds of the page.

Solution 5: Verify page elements in a responsive layout

If you face this issue in a responsive layout, especially in breakpoints that correspond to phone or tablet layouts, use the scrubber and preview your design across all the breakpoints. Verify whether any page element goes out of the scrubber area as you resize and preview the layout.

If there are items that reside outside the scrubber, it is likely that the Resize property for these items are set to "None".

To eliminate the extra space, do one of the following:

  • Set the Resize property of these elements to either Responsive Width, or Stretch to Browser Width. 
  • Create a new breakpoint at the width where the elements go out of the scrubber. Resize and reposition these page elements in the new breakpoint.

Other possible solutions

  • Enable sticky footer if not enabled already.
  • Check the spacing and padding for inserted elements.
  • Remove any third-party HTML content on the web page.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy