Remove space between header blox and page title

Hi mmccomas,

This is a CSS issue related to your theme. I noticed two things when inspecting the site. The first is that the .site-inner <div> has a hardcoded margin-top of 70px assigned to it. This seems a little peculiar since the styling for this <div> is usually located in your style.css file.

The second is in your style.css file. On about line 632, you will find the following code:

.site-inner {
    clear: both;
    margin: 73px auto 0;
    max-width: 1280px;
    word-wrap: break-word;
}

Ok, so now for a solution. Since it does not appear that you are adding headers to every page of your website, I would hesitate to recommend you edit your style.css file directly. What we can do is load specific CSS only when the header image block is displaying.

On the Visibility tab of the block, try adding the following code:

.site-inner {
    margin-top: 0 !important;
}

This will remove the top margin on the .site-innner <div> whenever the block is displayed.

Let me know if you run into any issues and it everything is working, please mark this ticket as resolved, thanks!

Best,
Nick

Nick, this is awesome. Great work. Worked perfectly on that site.

Quick follow up question…can you tell me why the same CSS doesn’t work quite right on this site…https://centerstreetdigital.com/about/. You’ll notice it removed the header spacing but bumps it up against the image to close. I do have the title toggle plugin activated, but I checked and it does the same thing with the page title in there.

Every theme styles the .site-inner <div> and other surrounding <div>s differently. Looks like this one entirely relies on .site-inner for top margin. Simply adjust the margin-top attribute in the code provided until you are happy with the results. Perhaps 50px?

Best,
Nick