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:
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.
