Giant White Space
Hello im new to this community. I need some help regarding this practice project as im rather new in web development and im learninh HTML and CSS. The problem im having is whever i add a new line of code to my html code, it keeps going down the more lines of code i add. When i move it to the right position using css, it just leaves a giant white space at the bottonm of the page. What can i do to fix this?
35 Replies
i also had white space horizontally but i fixed it by using the code "overflow-x: hidden;"
You would really need to show your code, preferably in a Codepen https://codepen.io/ or similar that demonstrates your issue so that somebody might be help you work out what is happening.
ok i will drop the code here in a second
here
The first thing on your page is an element with the class "banner".
In your CSS you have given this a height of 100vh. This means that the banner has a fixed height 10 100% of the veiwport and is therefore pushing all the following contents down out of view.
so how do i fix it?
In general it is best not to define a height unless there is a specific reason to do so.
As far as I can tell from your code that element doesn't need a height at all.
so i can just remove the height line?
Most elements will get the height according to their content.
yes
alright lemme do that rq
i did that and now i can only see the middle of my page
i cant see the content bar and logo on the top anymore
you haven't removed it on your codepen
ok let me do it
you have more issues, that was just the first thing to fix
updated on codepen
ok, now the next element after your header is an image of a doctor.
However you haven't set any dimensions on that so it is taking up the full width of the viewport and it's height is adjusting to maintain the image ratio. This is probably pushing your content after the image down.
sorry.... you have defined styles for that image. one sec...
alright
ok, you have set the image to have a width of 100% but not given it a height so it is doing as I said, pushing the content down.
I know that you have tried to position the content but that isn't normally the best solution
What is it that you want to do with the image?
Is it a "Hero" image?
i was using it as a front image for the website
Is it supposed to be behind the content?
yes
heres what i was trying to do
OK, the best solution then would probably to add it as a background image on the body or somesort of wrapper (some people don't like using the body itself as a wrapper for some reason). Give me a sec and I will make a copy of your code to show you..
ok, will there be more content below that?
yes
there is and will be more stuff below it
heres the website im trying to copy as a practice
Is that your site or is that what you are trying to replicate?
its what im trying to replicate
im really new in html and css so i cant copy it perfectly
but im atleast trying to make it look similar
can viewport be used to fix this issue?
alright thanks
https://codepen.io/cbolson/pen/RwmLwQB
I have made a fair few changes and tried to simplify the HTML and CSS.
I have added a few comments to help you understand what I have done
I am happy to explain them in more detail
alright
thanks
let me test is and i will let you know
damn you really fixed it all
can you explain what did you change and how i can improve?
Quite a few things really...
- I divided the page into sections, header, hero and then the other sections.
This makes it easier to organize and control via the CSS
- let the document flow do the positioning. If you start to moving things around they may work on you screen but it will break on smaller/larger screens or screens with different resolutions.
- removed css classes and use "children" selectors to define spacing etc. There is no need to give every element a classname, espcially if it will only be defined once. Using it's parent (eg the section) is usually enough to be able to select it.
Note 1 - you can only have 1 <h1> tag on the page. This should be your main header.
Note 2 - I didn't touch or even look at your nav section
As for the general changes, I did the following:
- Allowed the sections to have their natural full viewport width. This allows you to give them background colors or images.
Each of these sections contains an "inner" wrapper. This is the element that actually holds the contents and has a max width to ensure that the contents doesn't get too wide. This has an inline margin of "auto" to place it in the center.
- Despite what I said before about not giving elements a fixed height, I did give this section a height of 100px. The reason for his was to then be able to let the CSS calculate, using the "calc()" function the remaining height of the viewport so that it takes up the rest of the vertical space (as per the demo site).
- On the "hero" section I used flex to enable us to postion the contents in the vertical center. Using "gap" allows us to space the elements out evenly (though it might be better to do the spacing manually as we don't always want the same space between elements).
- Rather than using linebreaks <br> which you had througout the code, let the browser create new lines naturally. I did give max widths to the hero section texts so that they looked more or less like the demo page.
- Used background images when the image is purley for decoration or where it needs to occupy the full width and height of it's parent.
alright thanks so much for the help
i appreciate it
My general tip would be to try to keep things as simple as possible. If you have to resort to positioning trickery you are probably doing it wrong (for standard content).
It is also worth mentioning that there are many, possibly better, ways to achieve the same result. However I have tried to keep my changes as simple as possible. With the exception of the "calc()" function to calculate the height of the hero section, I don't think that I have used anything too modern or complex in the code.