Hi!
FCC has been an amazing resource! Hope you like it, too!
For the past few days, I’ve been stuck on the product landing page. It’s not the page itself that’s the problem, but the header and navbar have been driving me crazy. Here’s my code https://codepen.io/rgbcrayon/pen/poJXZYP.
I also wanted to have both text and an image in the #logo. Can anyone point me in the right direction, when it comes to the header? I want it to resize dynamically, and to be centered when it’s a small screen, just like the example. I have copy pasted some code, but I don’t understand all of it.
Thanks in advance!
1 Like
You want logo and text on same line instead of next line? Need some explanation to look into your problem
Yes, I would like them to be on the same line. I understand h2 needs to be inline for that, right?
Yes, h1 it needs to be inline.
Interesting. I seem to have fixed the header. It is centered now, but I don’t get how it works.
When the screen is small, the header gets smaller, too. I use a media query and set flex-direction:column; and then I do align-items:center. Why does that center the items on the x-axis and not on the y-axis? What is the difference between align-items, justify-content and align-content?