Please review - Technical Documentation Page

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.

Thank you.

@eklavyasharma Nice work.
This is what you can do to make it look better on mobile devices.

  1. Open the dev tools and click on the “Responsive Design Mode” button to shrink the screen to mobile view.
  2. Adjust the design until it looks good on small mobile screens.
  3. Increase the width slowly and fix the design where it breaks.

You can view this Technical Docmentation page to get an idea of how I did mine. I started the design at the smallest mobile screen size and expanded the design from there. That is why you will see the pixels increase.

@media (min-width: 400px) {
    ...code...
}
@media (min-width: 800px) {
    ...code...
}
@media (min-width: 1200px) {
    ...code...
}