Removing empty space between top of page and header image as well as the "All Systems Operational"

[Harry Parfitt]

I am trying to remove the space in the two boxes shown in picture below but unable to find how to do this using custom CSS as we're not having custom domains. Any ideas?

I don't have any CSS knowledge so sorry if this is very simple.

[Mark Campbell-Vincent · Accepted solution]

Hi @Harry Parfitt -

There's a bit of CSS needed since you aren't able to use Javascript. I've provided what is needed below to accomplish what you're trying to do.

Removing the spaces using CSS:

.layout-content.status .masthead-container.basic .masthead {
padding-top: 0px;
}
.layout-content.status .masthead-container .masthead {
margin-bottom: 0px;
}

 Removing the 'All Systems Operational' top level status banner using CSS:

.layout-content.status.status-index .page-status {
text-indent: -9999px;
margin-bottom: 0px; 

}

.layout-content.status.status-index .page-status.status-none {
background-color: transparent;
border: 0px;
}

That will look something like this:

Hope this helps!

[Harry Parfitt]

Good Morning @Mark Campbell-Vincent, Thank you very much for this it has provided exactly what we needed :)