Product Landing Page- CSS flexbox styling help

https://codepen.io/TashaTheUnicorn/pen/zYKQZrJ

Hey there!

I am having difficulty creating the layout that I want for my product landing page. I am trying to make the header and navigation bar stay at the top of the page. But when I add
position:fixed;
it places all of the lower content at the top of the page, over the header.
When I remove it, it flows better, but I can not figure out how to make the header stay put.
I also want the text content to be centered on the page, but my flexbox properties in place are not correct.

Any help or feedback is appreciated! thank you!

  1. You have to push the content that comes after the header down yourself, position: fixed removes the element from normal document flow (like position: absolute) so it will not interact with other elements that come before or after it (they will overlap).

For example

section {
  margin-top: 20rem;
}
  1. You didn’t close the “Features” h2 element correctly and it is align-items: center. Also, remember that flex-direction: column will switch what justify-content and align-items control.

Good morning!

I like your set up so far, the colors and rounded edges look nice!

If you add padding-top or margin-top to your video it’ll push everything down so it isn’t automatically covered by your header. Probably around 12vw.

Also, there’s a closing bracket > missing from your first body tag, I’m not sure it’s actually affecting anything with the way your project is being shown in CodePen, but in a live site it certainly would.

If you want your content to not be seen above or under your header consider adding a background color or image to your header.

For centered text on flex items you can use justify-content: center;, for other block items you can use text-align: center; to do it.

Keep up the good work!

Thank you! I needed the reminder that position: fixed removes that element from the normal flow!

Thank you! The reminders to use padding and margin really helped me get a look that is closer to how i wanted it to look!

1 Like

https://codepen.io/TashaTheUnicorn/pen/zYKQZrJ

I edited with your suggestions in mind. I think it looks much better than it did before!

I also added some bird embroidery images, from gifts that I made recently, which is where I got the idea for this to be my product.

1 Like

Looking good, keep it up! Wonderful embroidery, too =)

1 Like

Hi Tasha, i had the same problem too. Try position:absolute or position:relative
see if it changes. good luck.

1 Like

Yes! I was able to fix the header with position:fixed, then my next element I set a larger margin-top: to move that element to be below the header bar.

It was so satisfying to fix this problem!

Good luck with your work as well!

1 Like