Product Landing Page feedback - Pelago Tents

Hello everyone. For my product page I created a fictional tent company called Pelago. I found the styling and media queries on this project a bit mind bending and as a result I know my CSS is way too bloated. Any advice would be gratefully received.

Pelago Tents Product Page

Three things I can’t seem to sort out:

  1. The links in the nav seem to disappear off the right side of the page as the window gets smaller.
  2. I cannot center the “Features” text. I think it has something to do with the icon’s display: none media query.
  3. When you click on the navbar links to take you to the different sections, the navbar is covering the top part of the chosen section. I get that the navbar is fixed and has a set height that will cover the top of the content. Is there any way to get around this and have things line up properly when the links take you to the chosen section?

Thanks.

1 Like

Wow !!!. Too beautiful… Though there is great work you need to do with your media queries such that it is responsive enough on multiple platforms. Otherwise, too good.

Thank you for your kind words! I’m happy with how it looks but I know the media queries aren’t working right :confused:

Except responsiveness everything looks really cool. I’ve seen some people making their background pic moving when you scroll down - feature like that would make your page absolutely fantastic. Otherwise - great work.

Looking good, nice design. The responsiveness isn’t that bad, just some tweaks needed.

  1. Add width: 100%; to the header, remove the width’s on .logo-cont and #links, add margin-left: auto; on #links.

  2. Move the #nav-bar 700px media query breakpoint to 760px.

  3. At around 500px you need to figure out what you want the nav links to do in order to stay on screen. You have different options, including adding a mobile nav.

  4. Add justify-content: center; on .f1 in the max-width: 700px media query breakpoint.

  5. Try adding the height of the header/nav as padding top to each section.

  6. Speaking of sections, i would like to see the section element used instead of divs for the sections.

1 Like

Thanks for your comment @BlackDrake. I’ll try and get the responsiveness sorted.

Thank you so much @lasjorg. That was really helpful advice. I’ve tried to implement your tips and things seem to be working well. I am struggling with the 500px breakpoint though. I wanted the links to become a column at that breakpoint. I thought that would be a simple case of creating a media query for the links class and adding flex-direction: column; but it doesn’t seem to do anything. Any ideas. Thanks again.

You did an awesome job on the layout, love the design. Like others said the responsiveness needs some tweaking, though I understand that problem all to well at this point :).

Thanks @raregamer! I find the responsiveness really tricky!

Yes same here I feel like it always is trying to kill me. Because a lot of elements to keep in mind, how the parent effecting the child.

I know right @raregamer ! Just when you think you’ve got something working, the media queries throw everything into mayhem! Ah well, I guess that is the best way to learn - dealing with things breaking. If everything worked on our first attempt we wouldn’t learn much. We’ll get there. :muscle:

If you want the nav links to stack you can add flex-direction: column; to header ul (in a media query). Then you need to position them.

Brilliant! Thanks again @lasjorg. You’ve been a massive help.

Great work! Very clean design. Congrats!

About the code I think everything has been said here already :slight_smile:

Keep it up!

your <div class="product" > needs more space on mobile then width: 250px;. i would use a media query to increase it, otherwise on small screens you are loosing a lot of potential space content display to just show a background color.
You also have to work on margin of margin: 60px; on parent <section id="tents" class="productscontainer">

Thanks so much for the nice comment @SpaniardDev. It’s comments like this that make me push on even when things get hard and confusing!

Thanks @sorinr. Good catch with that. I’ve added a media query to increase that part when on mobile.

Awesome layout mate. Super clean!