Close Gap Between Header Image and Top Paragraph

[brandon47]

There is a large gap between where the Header Image and the Text starts in this website and I have added an image to show it. How can i fix this so the text sits close under the Header Image https://www.beds-galore.com.au/

[Erik_J]

@brandon47

There is a large gap

The gap seems to be caused by the oversized heights set by media queries on header-main:

@media (max-width: 768px)
.header-main {
    height: 450px;
}
@media (max-width: 991px)
.header-main {
    height: 550px;
}
@media (max-width: 1199px)
.header-main {
    height: 650px;
}
@media (max-width: 1400px)
.header-main {
    height: 750px;
}
.header-main {
    height: 900px;
}

I guess the padding here is the gap you want:

section#services {
    padding: 90px 0px;
    text-align: center;
}

The easiest solution seems to be lesser heights on header-main.

Other solutions could need a different implementation of the Header Image.

[wake689]

@Erik_J

section#services {
    padding: 90px 0px;
    text-align: center;
}

Hope it’s not too off topic and I hope you don’t mind me asking - how did you find the CSS from the info given?

[Erik_J]

@wake689

how did you find the CSS

Through the browser’s Inspect tool in the context menu, right click or (Ctrl+Sh+I).

[PaulOB]

As @Erik_J said above the heights of header-main do not match the height of the images that you are using. Therefore you have two gaps. One from the oversized header and one from the padding on section#services as already pointed out.

You should really use a better method to place your header image rather than loads of media queries.

I believe you have some code that was built for other purposes but does not seem to be utilised. In your example as it stands you can get rid of all the media queries and transforms and just set the parent to position:relative; and let the image take up the natural height using height:auto on the image. In this way the image scales up and down without any media queries.

e.g. Very Roughly.

See the web inspector for the couple of rules that have been added and all that have been turned off.

Of course I realise that perhaps you have something in mind for all that other code but form what I can see 99% of it is redundant and unnecessary.

@wake689

how did you find the CSS from the info given?

Just use your developer tools and highlight elements in turn.