I am creating a wordpress website (colorsplash.info/vinovekitchenware/). Currently I am stuck with the following problem: i want to remove the white space between the header and the slider. After spending 2 to 3 hours, i am still unable to remove the space between these two section of div.

Here is the div section:

header id="header" class="col-full parent"> // it contains header section

section id="main" class="col-left"> // it contains slider section

Please help me!!


I usually won't do 'live-review' but in this case I couldn't resist to take a quick look at the problem 'on location'. And there are actually a couple of reasons for the white space – at least I found these two so far:

  • Your header has a margin-bottom of 0.631em in line 585 of your stylesheet. Remove that or set it to 0 and some white space will disappear.

  • The article post-33 has an empty header with an empty headline h1 inside, which sits right above the slider. Remove that header and you'll win another 15px or so (not tested, but should work: .post-33 header { display:none; } )

The above two measures should reduce the gap to approximately 5px. There should be at least a third reason for the remaining 5px which you'll probably find once you take a deeper look at what's going on (I recommend firebug or the like).

Update: the remaining 5px are actually part of the images presented in the slider! Crop the images properly, and the remaining 5px will probably be gone.

Here's a quick screenshot of the gap after I 'fixed' the two issues in firebug:

enter image description here

|improve this answer|||||
  • Thank you very much for the help you gave me. Your help solved my problem. You are great. Now there is no space between slider and header. As you suggested, I removed margin bottom from header and the rest of space is being caused by empty h1 tag. I commented the h1 tag as you suggested above and now everything is perfect. Many many thanks to you @tillinberlin. – Paramveer Kumar Sep 24 '15 at 5:37
  • Glad I could help! Just one more thing: you may consider closing the question / accepting the answer… Greetings! t – tillinberlin Sep 24 '15 at 14:28

It is difficult to say what can be your problem here ans there are tons of reasons why this can be happening. I can suggest you to copy your html and css and create a codepen or a js fiddle and update your answer with the link to your code. This way anyone can take a look the problem you have and help you.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.