Technical Documentation Page - Media Query Issue

1

This is my project: https://codepen.io/Aka1822/pen/MWWvyoK, full view: https://codepen.io/Aka1822/full/MWWvyoK

It looks OK on desktop, but I have some issues on mobile. I managed to fit the main text somewhat OK. I chose a width of 70%, and it looks decent. I shrank the image to 100%, and that looks OKish as well. I have troubles with the navigation bar, as it is constantly on top of the page, it is not on the left as it is in desktop mode, and I am not sure what to do with it. I’ve added top, left, font size, just to see if something changes, and it doesn’t. Trying to use “position: relative;” to it seems to make it somewhat better, but not good enough.

How could I make it to behave similar to the desktop version? I am not even sure about (max-width: 600px), it was mostly trial and error, and maybe some of the code inside the media query is useless. I would really appreciate some suggestions.

Current code:

@media screen and (max-width: 600px) {
  #main-doc {
  color: red;
  width: 70%;
  padding-left: 17%
  }
  
  img {
    width: 100%;
  }
  
  #navbar {
  width: 100%;
  top: 0;
  left: 0;
  font-size: 5px;
  background-color: #F5F5F5;
  border: solid;
  border-style: hidden;
  }  
  #navul {
  width: 100%;
  top: 0;
  left: 0;
  font-size: 5px;
  }
}

Thanks!

2

I went with flexbox for this project. Main site was columns and switched to rows when screen width got smaller.

3

I assume that you used flexbox just for the navbar?

4

Main container was flex box:

On larger screens: flexbox columns; Nav was 100% height and X wide.

Media query: flexbox rows; Nav X height & 100% wide. (trial & error for max width. there is probably ‘design rule’ like sidebar should be 30% max width but I just went with what looked good to me :slight_smile: )

https://cdpn.io/pjonp/debug/PooZqby/NQMzYBqovNqk