Remove White Space Above Header Image WordPress & Divi – Fast

by | Dec 2, 2019 | Web Design | 0 comments

Building a WordPress site and want to remove the white space above the header image?

There are a couple of ways to achieve the removal of white space above the header. 

 

First I will provide info for WordPress users in general and second will be some tips for those who are using the Divi framework.

 

1. WordPress:

In WordPress you need to go to your style.css file.

I highly recommend you use a child theme for this as any future updates will override this change and you’ll go back to seeing the white space. Avoid that by using a proper child theme. (Check out this extended guide for creating a child theme on the Kinsta blog.) 

Or you can use a child theme plugin 

Ok on to the editing…

Step 1.

Go to WP Dashboard > Appearance > Theme Editor

 

Once in the editor go to your theme’s style.css sheet.

Scroll down to find the words: Structure

Under “Structure”

look for:

#page {

margin: 2em auto;

}

CHANGE: 2em to 0em and you’ll have removed the space.

 

REMOVE WHITE SPACE BELOW HEADER – DIVI THEME

It’s even easier in the Divi theme and framework.

There are 2 methods:

1. Find the top section and go to the Design Tab. 

Go to Spacing and put 0px in top padding. This should remove the white space.

 

2. Via Theme Editor:

– go to WordPress dashboard and Appearance > Theme Editor > Child theme style.css file (should be the first one that opens up) > scroll down to where you see the following code:

 

html {

      margin-top: 17px!important

}

– change the 17px to 0px

– this will remove the white space

 

 

 

Find Out More About Getting to the Top of the 3 Pack (& Google)

Speak to a consultant about your business in Google's local/maps 3 Pack. Let us get you to the top of the pack!

Click to Book a Call with Tess

You have Successfully Subscribed!

Share This