Product Landing Page: Having Issues with Flexbox and Nav-Bar

1

I have a few small issues that I suspect are related? I tried to google my way to a solution but after 60-90 minutes of searching and trying things, I feel I could have eventually gotten there, but that it would have taken long enough that it’d be smarter to stop and ask for help.

1.) For my #header { CSS I originally tried to use position: fixed; however this would completely wreck the flexbox placement of the img and nav links (to the left and right sides respectively). However using postion: sticky seems to semi work, but it is kind of “hacky” and does not seem like the best practice to me b/c of the way you can see it move to stay at the top.

Edit2: Found out I needed to set background-color: if I wanted nav area opaque so 2nd question no longer applies.

Edit: I found out about the initial property in CSS and was able to get them to stack correctly so my 3rd question no longer applies.

Really appreciate any assistance or point in the right direction.

2

Hello, rgil.

Here are some tips:

  1. Have this as your first line of CSS (always, for Chrome): * { margin: 0; padding: 0; } This removes the default margin and padding added by certain browsers, and is why your body has a margin at the top, preventing the header from being flush with the top.
  2. Use background-color on the header to make it opaque. Then, make sure it is on top of all your other elements, by using the z-index property.
  3. Use your devtools with the element selector to get an idea of how everything is spaced and sized. I find it much quicker than changing the CSS in CodePen.
  4. Use position: fixed; on your navbar/header, and just add padding-top: 40px; (in your specific case) to your main element.

I have just seen your edits, so take those for now. Hope this helps

1 Like
3

Thank you for your help and fast reply!

I added:
main { padding-top: 40px; }

* { margin: 0; padding: 0; }

and changed:

#header { position: sticky; }

to

#header { position: fixed; }

However it mangles all the formatting :frowning:

Would you happen to know anything about this code I got off stack:

<meta content="width=device-width, initial-scale=1" name="viewport" />

With out it my media queries don’t work (at home using vs code live server extension and viewing in chrome). However when I add it, it seems to change the size of some elements sized with rem, and I suspect it maybe the cause of mobile view starting off zoomed in on page load. Where I would normally expect it to behave like most pages where mobile page load starts fully zoomed out.

Thx.

4

The meta tag is a must. A lot of weird things will happen to your page, if you do not include it. I believe CodePen already includes it, but for your local workspace, you will have to make sure it is there.

You can read more about it here: W3Schools Meta Tag

For CodePen, you must not include anything outwith the body tag, as this is automatically handled by the editor. So, if you want to link something to CodePen, you need to click on the settings icon for the HTML section, and add it to the "Stuff for <head>" section.

Tip: When I begin with a webpage, I make all of my main elements different background-colors so that I can see what is going on easily.

Now, you will need to make the width of your header take up the full width of your window (100%)

Adjust the main padding-top as needed.

Hope this helps

1 Like
5

Great advice, I will absolutely do this going forward.

That did the trick! Thank you.

One issue I’m still having, is that when I load it on mobile(I port fwd the vs code live server extension so you could see what I see - http://yggnet.xyz:5500 ) the pages loads zoomed in and the 3 nav links look offset to the right, but if I zoom out there is more room to the right and the nav links are correctly centered?

6

I did not know you could do that with the live extension!

I am not sure what you are referring to. This is what I see:
image

1 Like
7

Yeah, just use nat & port fwd on your router to fwd public ip requests to whatever private ip your box running vs code is using.

Bizarre! That is exactly what I would expect.

I’m a new user so it won’t let me upload 2 photos at once but this shows what I see on my phone:
https://imgur.com/a/JsMFrEP

8

Try changing your header width to 100vw.

1 Like
9

Weird, at first glance that fixes it, but I’m still able to zoom out and then it appears the header doesn’t fully extend. (see below new screenshots)

https://imgur.com/a/oPOSneX

It is like something is manually setting the width wider then my phones width (412px)…As I was typing this I figured it out. In the CSS for section 3 I previously had:

#section3 {
    display: flex;
    padding: 250px;
    flex-direction: column;
    align-items: center;
}

I had just previously thrown in padding: 250px; to fill out empty sections and get a feel for what happens when scrolling. But b/c I only supplied one number to padding it did 250px to all four sides making the width 500px minimum if the browser doesn’t ignore any of the padding. Now that I removed the padding every thing seems fine.

Thank you so much for helping me run this down, I really appreciate it!

1 Like