Header height

https://www.butfly.se

Hi @pejo76,

You could reduce the height of the header with some custom CSS.

To add custom CSS: Firstly set up a child theme or activate a custom CSS plugin. (If you have Jetpack installed then you can activate its custom CSS module.)

Enter the following snippet in either the editor for your CSS plugin or the style.css file of your child theme:

@media only screen and (max-width: 1600px) {
    .site-banner-media {
        padding-bottom: 40%;
    }

    .home .content-area, .blog .content-area {
        margin-top: 40%;
    }
}

Increase/decrease the value of padding-bottom and margin-top by the same amount and to your liking.

Let me know how you get on with that! I’ll be happy to help if any extra questions come up, too.

Lovely!!! Thank you very much!!!

Haven’t found anything about the ability to control the number of boxes below the header and realize it’s depending on the width of the screen.

If not possible allready, might be a nice feature to be able to choose for ex 4 columns with smaller image/text.

Thank you for your prompt response!

You could change the width of each post to 25% in order to change the number of columns to four (the width is currently set to 50%):

@media only screen and (min-width: 1200px) {
	.posts .hentry {
		width: 25%;
	}
}

You’ll notice, with the above custom CSS, that the default way the images are switched around doesn’t fit in well with four columns. You can fix this and get all of the images to display on the same side with the following:

@media only screen and (min-width: 1200px) {
	.posts .hentry:nth-of-type(4n+3) .entry-media, .posts .hentry:nth-of-type(4n+4) .entry-media {
		float: left;
	}

	.posts .hentry:nth-of-type(4n+3) .entry-inner, .posts .hentry:nth-of-type(4n+4) .entry-inner, .posts .hentry:nth-of-type(4n+3) .edit-link, .posts .hentry:nth-of-type(4n+4) .edit-link {
		right: 0;
		left: auto;
	}

	.posts .hentry:nth-of-type(4n+3).has-post-thumbnail .entry-inner:after, .posts .hentry:nth-of-type(4n+4).has-post-thumbnail .entry-inner:after, .posts .hentry:nth-of-type(4n+3).has-post-thumbnail .entry-inner:before, .posts .hentry:nth-of-type(4n+4).has-post-thumbnail .entry-inner:before {
		right: auto;
		margin-right: 0;
		margin-left: -25px;
		left: 0;
	}
}

Let me know how you get on with the above.

Hi there, in reply to reducing the height of the header with some custom CSS. I am new to wordpress and css. If i have jetpack installed, what steps do I need to take to reduce the header slider to 40% of what it is now?

Thanks!