Product Landing Page- CSS flexbox styling help

Project Feedback
#1

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!

#2
  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.
#3

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!

#4

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

#5

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
#6

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
#7

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

1 Like
#8

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

1 Like
#9

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