Too much space between header and content

Hi there!
www.thedreambiglife.com if our website and there seems to be way to much empty space between where the header ends and the content starts. Is there a solution for this?
Thanks in advance?

Hello there,

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .site-content {
      padding: 20px 0;
    }

Regards,
Kharis

Perfect! Thanks!! Much appreciated!!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

How can I use this code for specific pages? Like, I want to have different spaces for different pages

Hello there,

To target specific CSS on certain page, we can precede the code with page ID class name which reads like this .page-id-321. So the code will look like:

    .page-id-321 .site-content {
      padding: 20px 0;
    }

Use web browser’s inspector tool to get the page ID class name, which is attributed to the body tag.

22

For more easier you can use Reveal IDs plugin.

Regards,
Kharis

Hi Kharis
I have plugged in WooCommerce and i have a huge white space (about 2/3 of the page height) above the product, and below the header menu on product pages.

I have disabled every plug in and also added the additional css code as per your above instructions, but it hasnt worked for me - the product only moved about 2cm upwards.

Could you propose another solution

Hello @kathryne,

Please share a link to your shop page here, so I can inspect and suggest you with a couple of CSS code to fix that problem.

Visit this link and create your own topic if you have any other questions.

Regards,
Kharis