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.
The links in the nav seem to disappear off the right side of the page as the window gets smaller.
I cannot center the “Features” text. I think it has something to do with the icon’s display: none media query.
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?
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.
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.
Add width: 100%; to the header, remove the width’s on .logo-cont and #links, add margin-left: auto; on #links.
Move the #nav-bar 700px media query breakpoint to 760px.
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.
Add justify-content: center; on .f1 in the max-width: 700px media query breakpoint.
Try adding the height of the header/nav as padding top to each section.
Speaking of sections, i would like to see the section element used instead of divs for the sections.
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 :).
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.
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">