I'm extremely new to HTML, currently undertaking a fullstack course, so sorry in advance if I ask anything idiotic!
I have a space showing inbetween my main content section and footer, causing an unnecessary scroll bar being present in order to view the footer (after some dead space).
Ive tried manually changing heights etc. of elements but had no luck, also experimented with overflow:y on various elements but they haven't had the desired effect. I'd like the index.html page to scale to display size, with the footer at the bottom (no x axis scroll bar).
Please could someone save me from insanity! I'm guessing this has a simple remedy, I'm only using HTML / CSS. Thanks!
Link to JSFiddle in comments below.
CodePudding user response：
The space is caused by the property "padding-bottom: 100%;" on "embed-container" (on row 238 in your stylesheet). Removing this property removes the gap completely.
Not quite sure what you mean by "in a responsive manner", but I hope this helped.
CodePudding user response：
delete the padding-bottom: 100%;
CodePudding user response：
You have to remove in the class .embed-container these property padding-bottom: 100%;.
CodePudding user response：
It is due to paddings and margins in your styles.
padding-bottom: 100% in .embed-container and margin:30px in .driver-quote, .summary classes. You need adjust the margins and paddings properly.
Sample Code I added. Sample Code