[Resolved] Giant margin between header and content, content overlaps footer

[Author]

Posts

[emilyM-2]

I am creating a custom post type with Divi for a client here: hidden link

There is a large margin between the header and content, and the content overlaps the footer. When disabling the Views plugin, the content template looks normal again, the margin disappears. Obviously I'd like to be able to use the Views plugin to create the content template though, so I'm hoping there might be something I can do to achieve that. Screenshot attached, thanks!

[Christian Cox]

Hi, can you please try deactivating Bootstrap? Go to Toolset > Settings > General tab, and scroll down to the Bootstrap configurations. Choose "This site is not using Bootstrap", then test again. Generally we do not recommend using Divi and Bootstrap together, as they use similar CSS classes that can cause selector clashes.

If that does not resolve the issue, please test again with only Types and Views plugins active, and let me know if the problem is resolved. If not, I'll need to see this happening in a browser to make a solid recommendation.

[emilyM-2]

Thanks for getting back to me!

The bootstrap selection didn't make a difference. After clicking around a lot I did discover this issue is only happening when I select the "Fullwidth" option on the content template settings, the other layouts load just fine. I can send login info in a private message if that helps!

[Christian Cox]

Yes, please provide login info in the private reply fields here. Thanks!

[Christian Cox]

Thanks for your patience. I see the problem is here:
hidden link

If you pretty-print the file in Chrome's console, you will find this code:

    var wtfdivi054_featured = $('body.single article.has-post-thumbnail .et_post_meta_wrapper img:nth-of-type(1)');
    if (wtfdivi054_featured.length) {
        wtfdivi054_adjust_margin();
        $(window).resize(function() {
            wtfdivi054_adjust_margin();
        });
    }
    function wtfdivi054_adjust_margin() {
        $('#content-area').css('margin-top', wtfdivi054_featured.height());
    }

So this file is responsible for adjusting the top margin. The wtfdivi054_adjust_margin function calculates the height of the featured image area and adds that height to the top margin. To reduce that top margin, you would have to modify this conditional somehow, or modify the markup of the page to make the current conditional false.

[emilyM-2]

Perfect thank you so much! It was Divi Booster causing the problem, under "posts" i had checked off " Make featured images as wide as the content area" and "Fix comment box responsiveness" which is what triggered the extreme spacing.

Thank you again for your help!