Support » Theme: Storefront » What CSS code will reduce the space between header and content?

  • Resolved boppar


    Hi folks.
    I use Storefront. On every page (except Homepage) there is a white space between the header and the content. I think this white space is just too much, specially when viewing in desktop.

    I’ve been tring some solutions without success. I’m terrible with CSS.

    Can somebody be so kind and tell me which CSS code I should add to reduce the white space, and where I should add the code?

    Thanks a lot.

    • This topic was modified 8 months, 3 weeks ago by boppar.
Viewing 2 replies - 1 through 2 (of 2 total)
  • 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:

    Screen Shot 2020 05 11 at 11 38 12 AM

    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;

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘What CSS code will reduce the space between header and content?’ is closed to new replies.