Feedback wanted for product page

Code Feedback
1

Hello!

Just finished my product page project and it’s passing all tests. Just wondering if I could get a little critique on it as I’m sure there’s plenty I could improve on.

CodePen - Product Page project

3 Likes
2

Hey, i just checked out your project page and you did a pretty great job. Watch a just a few tutorials on design and you will be good to go. Cheers

1 Like
3

Hello @JoystickJoshy! So far a good start. The mobile side does need some work though. A few suggestions that I think will make it better:

  1. Your header-img doesn’t have a height assigned. On my iPhone it loads and stretches down the screen. I would give it a height. If you want to it to be more responsive try using a relative unit vice an absolute.

1a) #header-img also has display set but the value is wrapped in quotes. You’ll want to remove the quotes. I’m not even sure why you need this. Same with the nav buttons and the contact info. you already have them set in a flex box and all three are being aligned in a row.

  1. The nav-link's get really out of place when on mobile. I would add in your @media (500px)
  .nav-link {
    font-size: 50%;
    vertical-align: middle;
  }

You don’t have to use 50% but pick a responsive unit that displays well as the screen shrinks.

  1. Since you gave your <main> a margin of 100px everything on screens below 1000px will be squished towards the middle of the screen. On some of the bigger screens it may not be as noticeable but on cell phones it is. I would make it responsive also. Maybe try something like
main {
  margin: 0px 5vw;
}

This will also allow you to get your video properly displayed on mobile.

  1. If you assign your video a height and width you can make it fit the mobile screen. So instead of hiding it, have it available. try something like this in your @media:
 #video {
   width: 80%;
   height: auto;
 }

Remember the width of % is the percentage of the div that it’s embeded in. In this case it’s 80% of your <main> width. Change it as you feel needed.

There are some other things that you can do t improve user experience but start there and see how that works. Great job so far!

2 Likes
4

Thanks so much for the detailed write up. All of the points make sense and I’ll have a go at making those changes. I had forgotten already about the “vw” unit for margins and that makes much more sense.

Appreciate you taking the time for this! :slight_smile: