Product Landing Page and some help please!

Link to page: https://codepen.io/bdurrant91/pen/vYNMXVP

Feedback would be gratefully received - still very new to all of this.

I have a couple of questions which I hope can be answered:

I had a gap between my nav bar and the top of the page which I managed to fix with

.title {
margin: -8px;
}

I have no idea why this was needed - some explanation would be great!

Also I used the @media commands to make the site look good on my phone, but it only seems to look good on that specific device. Any general advice about how to go about adding the @media commands?

many thanks in advance,
Ben

I noticed in your code a couple of things, first that you do a lot of mixing of values (px, em, %,) in addition you mix max/min with vw as well…might I suggest that you try to stick to one form such as em as much as possible.

In addition, (I am pretty new myself) I saw “rem” in your code several times when I think you meant just “em” and that I would guess is an issue as well.

Hope this helps :slight_smile:

1 Like

hi @heather.kent726,

would you mind explain us why need to add top: 0; in navbar parent container?
i know it solved but never knowing the meaning.
thanks

It means to position the navbar 0px from the top. This is a must when you are using position: sticky, and if this is not used, it will not stick to the top of the page. It will just stay in a position absolute.

2 Likes

It’s a combination of the default top margin on the h1 element and the body element. The top padding on the h1 element has extended the margin box to the top of the page.

body {
  margin: 0;
}

.title {
  text-align: center;
  padding-top: 220px;
  margin-top: 0;
}
3 Likes

hi @lasjorg,
this mean that the h1 default margin is 8px is that why it affecting the header that position: fixed , to downward 8px like the navbar is hanging ?

If I understand your question correctly then no, the 8px would be the default margin on the body, not the h1.

What you need to keep in mind that position: fixed and for example position: absolute does not use the same rules for determining the containing block (i.e. why the body margin is affecting the element with position: fixed the way it is).

Identifying the containing block

If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).

If the position property is fixed, the containing block is established by the viewport (in the case of continuous media) or the page area (in the case of paged media).

1 Like

As I narrow my browser I’m getting a horizontal scroll bar a lot of the time. A page with this simple of a layout should never have horizontal scroll bars. My recommendation would be to narrow your browser as skinny as you can make it and style the page so that it looks good at that skinny width. This will be your base CSS. The slowly widen the page until you feel you have enough room to rearrange the elements on your page for a wider view port. Set the break point there (you will use min-width: XXem for the break point) and style for wider width. Continue this process as needed.

Notice I used ‘em’ units for the break point. This will make it so your page is not only responsive to changes in the browser width but also in the text size. To ballpark the value, divide the pixel width by 16. So if you decided your first break point should be at 500px then you would use

min-width: 31.25em;

Then you can adjust as needed, but this should get you close.

2 Likes

Thanks - I’m going to educate myself a bit better on layout control and redo this mess!

Yeah… layout control is a bit complicated thing to learn. You need to clear your basics for that.

Yes I’m going to spend plenty of time getting my head around it all! I’ve started the page again from scratch with all of your advice and think it went much better this time…!