Been struggling the past week to understand what I’ve been doing wrong when adding my nav bar to a media query.
The issue is that, when the width is less or equal than 600px, the nav bar should be in the left hand. And I managed to do it,but the site still relates me that it’s wrong and I can’t understand what’s the problem.
Searched in FCC’ forum and sites related to CSS and FlexBox and couldn’t find my solution based on them.
Could someone help me with this? I’ve the code.pen right here. I also want to ask for someone to point me to bad practices in my code,if you have the time.
I really appreciate the attention in advance.
https://codepen.io/rafaeldfigueiredo/pen/mYjmxm
You are failing this:
1. On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left half of the screen. It should always be visible to the user and should remain stationary. You may need to enlarge the viewport or zoom out to ensure the navbar doesn't scroll with the page content.
The issue may be that your nav bar is at the top of the page, instead of on the left hand side of the page. (The right limit of the navbar can’t be too far right)
1 Like
Yeah, that’s an user feature, to have a nav bar. The issue is when a device is less or equal than 600px, it should be on the left side of the page. And it is,but the test says otherwise.
I didn’t pointed it out and just edit it in, sorry.
actually, it is with bigger screens (laptop for example) that it should be on the left hand side of the page.
Instead yours is at the top of the page. So the right limit is too far right.
You can probably just switch to using min-width in your media query. That will reverse the logic.
@media (min-width:850px)