Technical Documentation Page (Flex) Feedback

This is my Technical Documentation Page

https://codepen.io/MariaIo/pen/yZmOWx

Please give me feedback.

P.S. And I tried to make insert of a CodePen to FreeCodeCamp as here Please Review - Tribute to Most Bad-ass Woman Ever … Do you know how to do it?

awesome work man keeping coding

1 Like

It looks goods, but it not responsive!

1 Like

Hi, silverKnight!
I don’t understand. Please explain.

I was trying to say that it is not responsive to small screens like mobiles. And it is good practice to make your projects responsive…

So you may want to experiment with media queries and make your projects accessible to mobile and tablets.

:wink:

1 Like

Stack it into a one-column layout with the nav at the top at smaller screen sizes.

Quick example, you should give it a try yourself first (remove the media query with the width for html, body as well).

Summary
@media (max-width: 800px) {

  #navbar {
    width: 100%;
    height: 180px;
    text-align: center;
    overflow: auto;
    padding: 0;
  }
  
  #navbar li {
    padding: 0;
    margin: 0;
    width: 100%;
  }
  
  main {
    margin: 180px 0 0 0;
  }
  
  #flex {
    background: none;
    text-align: center;
  }
}
1 Like

silverKnight, responsive is really important. Thank you for your help.
I worked on it in the site from beginning and tested in chrome mobile,

and opening Debug mode (https://s.codepen.io/MariaIo/debug/yZmOWx/yYAyLOELXKVr) on mobile. All was ok.

After your last comment I tried again and… then I opened usual view of CodePen on mobile and click to Full Page View than it become not responsive.
Is it real problem with responsive or it’s just a some bug of a CodePen?

lasjorg, that is really great comment! Thank you.
I will use it if I will loose all chances to save view as in the pic in the previous reply for all users.

I am not very familiar with CodePen so I can not tell, and even when I checked the project on Chrome DevTools it is not responsive. But @lasjorg already gave you some good clues on what you should do.

Nice page… Though missing out on responsiveness