SharePoint 2013 layout issues on Welcome page with summary links RRS feed

  • Question

  • Hi all

    When we create a publishing page on any of our site-collections (even on a brand new farm), the amount of items in the menu seem to affect the page by creating a gap as long as the menu. 

    The specific template (page layout) we are using is the Welcome page with summary links. I see that the Welcome page with Splash is doing the same thing (others might also be affected).

    To simulate this on another farm, I created a Team site and then enabled Publishing. I then added several items to the menu and then created the test pages from the Page library. 

    Below is a screenshot demonstrating the behavior. The Welcome page with summary links has no html in the content area. Adding content to the area does not affect the gap. It looks like the html layout for these page layout templates were not correctly done. Can anybody reproduce this (I tried this on three different farms, two with migrated content and one completely vanilla)

    On our production environment, we have lots of sites/site-collections using these publishing page layouts and the users are demanding that we get rid of the gaps (the site were migrated from previous versions of SharePoint, but as stated above, I can reproduce this behavior on a vanilla SharePoint 2013 site).

    Does anybody know how to get around this issue? The latest CU that I tested this on was April 2015.

    Gap on Publishing page

    Thursday, June 11, 2015 1:12 PM

All replies

  • I also got the same issue and could not find any OOB way to resolve it.

    this is how I solved it by manipulating css to get rid of the gap.. Add this code to content editor webpart/script editor webpart..

    <script src="/your site/SiteAssets/jquery-3.2.1.min.js"></script> // add jquery
        $(document).ready(function () {
            $(".welcome.welcome-links .welcome-content")
                .height(Math.max($(".welcome.welcome-links .welcome-content p").height(), $(".welcome.welcome-links .welcome-image").height()) + 15);
            $(".welcome.welcome-links .welcome-content").next().removeClass("clearer");

    • Edited by 2Power Wednesday, September 6, 2017 8:45 PM
    • Proposed as answer by 2Power Monday, May 14, 2018 8:30 PM
    Wednesday, September 6, 2017 8:31 PM