Overflow Inline Elements: Facebook Login Project

Question

Hi All-

I was hoping I could get some assistance with this project. I am in the middle of cloning the Facebook Login Page, but I can't seem to control the footer's elements from flowing out of the page.

Per the actual Facebook Login footer, the elements seem to condense into a new block when the screen size shrinks. I want to duplicate this layout (obviously).

Any ideas? What am I doing wrong?

Here's the code via Codepen: https://codepen.io/pen?template=JjMvBBj

I appreciate the extra eyes on this.

Thanks!

Answer 1

From your code i can see you have set a max-width of 1200px

You can try a width of 100% instead so in this case it just takes the width of the page

Answer 2

Actually, I tried the 100% width but that didn't work either. I learned that the issue was I didn't use "flex-wrap: wrap" on the footer ul styling.

The "flex-wrap" did the trick.