gap in code

[Pavel]

Hi,

please see

Home on a desktop

notice below the footer there is a white gap

my codepen

https://codepen.io/Pavel_NA/pen/mdQqgEg

no gap, and on my smart phone no gap

please help me out

provide the correct code to fully resolve my issue


and a freindly follow up

kindly address a previous post here

missing divs

see https://forallthetime.com/progress/index.html and https://codepen.io/Pavel_NA/pen/ZEmejLR my goal is to have 4 divs beneath every h2 says "Button" that goes no where # .button { border: 5px solid; margin: auto; width: 50%; padding: 10px; background-color: #e70c68...

codeforum.org

many thanks! 🙂

 

[Johna]

The white gap shows on your desktop because the height of the screen is more than the page height. On your phone, or on codepen, the window height is smaller than the page height, so there's no white space below the footer.

To fix this you'll have to add min-height: 100vh to the body. This will make sure the page height is never less than the window height.

 

[Pavel]

please see

https://codepen.io/Pavel_NA/pen/BaGJpGM

Specifically line 8 for the body

i know it wont show on the codeoen....

Home

min-height: 100vh

is already applied

your $0.02 please 🙂

 

[Johna]

Oh ok, I hadn't checked your code.

Making the body a flex element, and then adding margin-top: auto; to the footer should fix it.

body {
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

Note that the footer goes a bit below the screen. This is because the footer height is actually 64px and some of the children elements seem to be overflowing out of the footer, but the footer itself is actually at the bottom of the page.

 

[Pavel]

Oh ok, I hadn't checked your code.

Making the body a flex element, and then adding margin-top: auto; to the footer should fix it.

body {
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

Note that the footer goes a bit below the screen. This is because the footer height is actually 64px and some of the children elements seem to be overflowing out of the footer, but the footer itself is actually at the bottom of the page.

yes, the white space is no longer under the footer.... but now its ABOVE the footer 🙂

see

https://forallthetime.com/drop2/contact_1.html

and this

https://forallthetime.com/drop3/contact_1.html

please use a codepen if that helps 🙂

what i did there was found the exact color of the form and made the white space that color

is that ok? anything to worry about? it wont bite me in the butt some where down the line?

how can i move the contact form?

position: relative

?

what would that code look like?

MANY THANKS!

 

[Johna]

You can make the background colour of the body that blue colour, so that the gap is not visible.