Remove White Space Above Header Image WordPress & Divi – Fast
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.
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…
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
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:
– change the 17px to 0px
– this will remove the white space