Product Landing Page - fake skincare brand

Hey! The product landing page took me wayyy longer than the past 2 projects. I definitely struggled with media queries and responsiveness. Please let me know if there’s anything I should fix / could improve on. Thanks!

Here’s the link: https://codepen.io/2_rt_2/full/OJyzWwL

1 Like

Hi, your landing page looks good so far. One thing I would suggest is that you use chrome dev tools and see how the page would look on the devices it suggests. The width of your page doesn’t quite fit on the display sizes they offer. This means that there is a rather unnecessary horizontal scroll bar on such devices. If you tighten up this a little this won’t happen. Otherwise very good effort.

Nice look page, mate. I like the symmetry in the color. Although not essential, you could try the following in this landing page:

  1. Make a transition when the mouse hover over the menu of at least a second, or 500ms
  2. Make the same transition when you click on the menu. It scrolls down like in a jump. A quick search on google on how to smooth scroll anchor links menu will give you a lot of ways to complete this. Again, just if you want to.
  3. The video could be 100% of its parents when it hits the mobile viewport.
  4. The products could be showcasing an actual(fake) product. Not a background color.
  5. Can you make the products more responsive? In some screens, they shrink and lose style.

Great job overall.

It’s a nice looking page @rrrach_2. One thing to maybe revisit as you learn more, when clicking on one of the links in the navbar the top of the section gets hidden behind the navbar.

Thanks @innominatus15! I actually have been using chrome dev tools to check how the webpage looks on the different devices. Sometimes when I use “inspect elements,” I get the horizontal scroll bar, but after selecting the different devices, for example, going from iphone x to pixel 2 then back to iphone x, i don’t get the horizontal scroll bar.

Thanks @germanbobadilla! I’m going to try to incorporate some of those suggestions and make some changes this weekend. Right now, I need a break from this project :sweat_smile:

Thanks @Roma! I’m going to have to look into that because I’m not quite sure how to fix that.

1 Like