Product Landing Page - Footer issues

1

Hi,

I am doing the Product Landing Page. My footer doesn’t stay in the same place as I maximum and minimum screen, what can I do?

Here is the link to my page: https://codepen.io/wendygao0309/pen/BaKBYRK

Thank you!

2

I’ve done a quick fix, but maybe someone else can give you a better explanation. Here is my take

  1. Analyze the html with codepen’s Analyze tool on the gear icon (this is amazing for solving bugs, check it out)
  2. There were many unclosed elements, now fixed.
  3. The footer is moving up not because the footer is crazy but because you’re floating elements inside the collection section.
  4. Here something happens known as ‘zero-height’ problem. This is: whenever an element contains floated elements, because they are out of the normal flow, they are not taken into account to calculate the element’s height. So if you check in the inspector tools your section has height zero. And you see the images, why? Because overflow’s default value is visible.
  5. I’ve added overflow:hidden. Which is one way to fix the zero height problem.

Check your codepen here.

Optional info

This also happens when we set a ul’s lis to float:left for example. The ul will be height 0. Try this example to better grasp the idea code.

1 Like
3

Hi @WendyG nice work
If you include the

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

at the top of the page you can se that all tests are passing. You have a problem with closing tags and especially you have elements opening and closing outside the <body> element.
/Jakob

4

Thank you so much for your help!

5

Thanks!
I always forget to add close tag.

6

You’re always welcome :female_detective: