What CSS code will reduce the space between header and content?

Hi @boppar!

When you want to tweak whitespace in your layout, you’ll likely use the margin or padding css properties.

For example, you could reduce the whitespace between the breadcrumb and the page content. In the screenshot below I’ve highlighted this area with a purple rectangle:

In this case, the breadcrumb element has both padding and margin. If you want to check this, you can right-click somewhere on the page and select Inspect element (or similar – different in each browser) from the menu. That will open developer tools that show you the page elements and their styles. This can be useful for finding out which elements and CSS rules to override.

You could use this css (in Customizer > Additional CSS) to reduce the margin on the breadcrumb element:

.storefront-breadcrumb {
	margin-bottom: 1em;
}

@haszari
Thanks, for your input.
It works very well. I’m very grateful.