Technical Documentation by Eklavya

Hi guys,

Need a favour. I am not getting on how to deal with media queries. Can’t do it all. Would you please review it and explain how the media queries can be fit into this project?

Thank you very much.

You’re currently using it correclty as I see it

@media only screen and (max-width: 400px) {
  #navbar {

  }
}

This rule means that all properties inside the #navbar block will apply to the element with the id “navbar” until the screen exceeds 400px of width. Try to apply “border: 1px solid red” and reduce the screen size.

Have you found a problem trying to change properties of the navbar? Some properties may not “work” because of the HTML layout

Hi, Thank you for replying.

My problem is - on media queries when I squeeze my screen to small size and click on navbar to check if they are responsive. Since navbar is fixed. The content is going above sticking to the top hiding behind the navbar. It’s not starting after the navbar. It’s sticking to the top of the viewport. The link is not landing the correct heading. This is happening only on smaller screen. The desktop view works fine.