My third project, Product Landing Page

Code Feedback
1

https://codepen.io/pcurry/full/BaBKGqq
Hi guys.
I hope you like what I have done over here, but it is a hot mess!
For some reason, my page doest size down properly, so my nav-bar is overlapping itself and the grid is also out of control. Out of the 4 pictures I have in the grid, how do I make them all equal in width and height the entire time while making them automatically resize? My method is really inefficient and unelegant and honestly I hate it. It seems like they are inheriting different sizes to begin with. Not sure. And why on earth do they seem to have different padding and margins too? Argh.
And then another big question. Once I made my navbar fixed(so that it stays up top the whole time). What do I do with the rest of the document so that it flows after the navbar instead of under it and below?

2

also there is a weird mouse wiggle going on, not sure what that is from.

3

The navbar is overlapping because the links have the property display: inline by default. You need to add display: inline-block.

Could you elaborate on your other points? What exactly do you want to do?

There are a few issues which I’d fix before continuing. Codepen automatically adds the head, html and body tags, so anything you put in the HTML box is already getting injected into the body tag.

  • You have html elements inside the head tag. That is only used for meta information for the page. (again, you don’t need to include that tag as codepen already does it for you)
  • Make sure your tags are all lowercase
  • The <main> tag should be used for the main content only. Yours ends after the footer, but it should be before.

I would personally add a container to some of your text to make it easier to read, but overall I think it’s great!

1 Like
4

I didn’t know that about codepen, so thank you! Will fix that now.
When you say you would add a container, do you mean have it be a different color background for specific text so it stands out more?

5

I’d make a container around 1280px wide, centred. It just makes the text easier to read on larger screens :slight_smile:

You could do that by writing:

.container {
   width: 100%; // We want it to be 100% width, but can't be larger than 1280px
   max-width: 1280px;
   margin: 0 auto;
}
6

oh! I have seen that before and I really liked it, I just wasn’t sure how it was done.