Removing unnecessary white space on WordPress website

HTML & CSS
1

HI

I’m developing a website for a local museum in WordPress - see www.eastsurreymuseum.com.
I’m having problems getting some spacing right. For example, or both the “home”, and “visit” pages, I’d like to reduce the space between the green header section and the first image/text by about 1cm.
WordPress’s “Happiness Engineers” haven’t been much help, glibly telling me to change the theme to 2024 or similar, which will completely change the layout of the website, so I suppose I need some CSS.
I struggle with CSS - I haven’t really done much coding since my days as a COBOL programmer in the last century - but I have already managed to write some CSS code which has improved the website’s appearance: I’ve added this to the foot of this post
Could anyone help me?
Thanks!
My CSS:

.entry-header {
	margin-top : 0;
	padding 0;
  margin-bottom: 0;
}
.post-inner {
	margin-top : 5px;
	padding-top: 0;
	padding-bottom: 0;
  margin-bottom: 0;
}
@media (min-width: 700px) {
  .singular .entry-header {
    padding: 0;
  }
}
.entry-title {
font-size: 6.4rem;
}
.margin-space-zero {
/* TBC */

}
.ste-content {
	padding-top 0px !important;
}
2

One clue: if you look at the pages which start with images or columns containing images (e.g. Home, Visit, Events) they all have too much space between the green header and the first image, but some other pages which are purely text (e.g. “Our collections”) do not.

3

The margins are controlled with the following rule which defaults to 8rem and 6rem for smaller screens.

You can change it like so.

.entry-content > .alignwide:not(.wp-block-group.has-background), .entry-content > .alignfull:not(.wp-block-group.has-background) {
    margin-bottom: 2rem;
    margin-top: 2rem;
}
1 Like
4

Thanks Paul - much appreciated!

1 Like