Storefront White space below header

Hi,

That space is the space reserved for the breadcrumbs you can see for example here:
https://www.boomrollers.com/shop/

And for the page title ( which you have removed ).

I notice you use the SiteOrigin pagebuilder.
You can add this code to your child themes style.css or the css section of the costumizer ( adjust the space to your needs )

#content.site-content {
  margin-top: -70px;
}

Or you can use the SiteOrigin https://siteorigin.com/css/

Good luck,
Annie

By the way ( off topic ) your shop is loading extremly slow and yet you seem to have W3 Total cache active.
https://www.awesomescreenshot.com/image/2066589/3e4f179928b1d75af15fbefd987ec7a5

There is an awfull lot of debug code going on on your pages, you might want to look into that as well.

<!– Performance optimized by W3 Total Cache. Learn more: https://www.w3-edge.com/products/
Object Cache debug info:

• This reply was modified 7 years, 10 months ago by LogoLogics.

Hi @ all,

same problem other side :-/ https://www.eunoya.de

Don′t finde the css.text

#content.site-content {
margin-top: -70px;

in my style.css ??

What can i do to make the white space below the header disappear.

Don′t use any child-themes – only Storefront parent-theme.

Thank you for help!

• This reply was modified 7 years, 10 months ago by eunoya.
• This reply was modified 7 years, 10 months ago by eunoya.

Hi,

If you want to costumize things, you should never do that in you actual theme files, but use a child theme. In there will be a style.css where you can put the code in.

Please learn about child themes: https://www.smashingmagazine.com/2016/01/create-customize-wordpress-child-theme/

Since the new version of WordPress, there is however an new tab in the customizer ( CSS ) where you can add code as well, without a child theme, see my screenshot:
https://www.awesomescreenshot.com/image/2068699/3ff1db9b0b12a8c7e5cb9c858051464f

Or you can use the SiteOrigin https://siteorigin.com/css/ which is great to make cool customizations without having to touch code!

Annie

Dear Annie,

Many thanks!
I will report back to you on that result.

Dear Annie,

i′m soooooo happy! Thank you *~* Thank you!!
You′re my HERO!

That is the result: https://eunoya.de/
Looks fine, or?

The white space below the header disappeared! JUHU!

Have a nice day!

BB

Hi eunoya,

Glad it worked out for you!
Result looks better now indeed.

If you’re asking my opinion about the overall look here are some pointers:

Slideshow above every page could be a unnecessary distraction from the actual shopproducts, especially on smallers devices and will make pages load slower.
Every second counts!

The big background image does make it a bit crowded, distracting from the actual products and text as well in my opinion. You might consider not adding a background image or giving it more transparancy.

Research on internet behaviour shows that pages need to be easy on the eyes and not too much distraction from what we really need/want them to see/focus on.

Also keep in mind that this background image will be even more distracting on small screens. Approximately 60% uses a smart phone or tablet to look at your shop.

Keep up the good work!
Annie

• This reply was modified 7 years, 10 months ago by LogoLogics.
• This reply was modified 7 years, 10 months ago by LogoLogics.
• This reply was modified 7 years, 10 months ago by LogoLogics.

Hi Annie,

many thanks for your pointers!
Some i changed already.

But, i tried to give the backgroundimage more transparency and search the funktion in the Custom CSS-Plugin.

Please help me just once more.

If I use the image in the “# content.site-content”, the image will flash down, but the installed backroundimage in the Customizer is also there. I do not want that. I want the image to be fixed in the background and more transparent.

Sorry for my bad english, i hope, you understand what i mean ??

Thank you very much

• This reply was modified 7 years, 10 months ago by eunoya.

Hi eunoya,

Yes, much better this way!

To make the image more transparent, you need to use a graphic software like Photoshop to do that, before you upload it to your WP dashboard.

However a quick google search brings up free tools like this one to get the basic job done: https://www.peko-step.com/en/tool/alphachannel_en.html

I am not sure what you mean/have done when you say:

If I use the image in the “# content.site-content”, the image will flash down

You should remove that, and only have the one background image inserted via the Customizer. You can choose there to have it as a fixed background as well.

Your english is just fine, as long as we understand each other, nothing else matters right!

Hope this helps,
Annie