How can I make this cleaner and responsive?

So I coded a page for the fCC Technical Doc test here https://codepen.io/dcosta89/pen/OJyJbBx, and I’m having 2 areas where I’m struggling:


  1. In this long html snippet, is this the best way to insert this? I know I shouldn’t be using the <pre> tag but it was the most efficient way to do this.

  2. How can I make the left sidebar a fixed sidebar, inside a flexbox container?

The main container that is wrapped, goes to the next line because the previous <figure> is too big and can’t wrap. I want to make them side-by-side using flexbox!

Personally, I think that using the pre-tag is absolutely fine as you are expecting people to copy it for use so it needs its formatting to be exact.

For fixing it onto the left add this code to your css:

#navbar {
position: fixed; /* Keeps the navbar always on the screen */
width: 200px; /* The width of the navbar - adjust accordingly */
height: 100%; /* Makes the navbar cover the whole left-hand side */
overflow: scroll; /* If the screen is smaller than the navbar then you can scroll it separately from the screen */
}
#main-doc {
margin-left: 350px; /* To position the text so that it is not underneath the navbar - adjust accordingly */
}

Hope this helps :smiley:

1 Like

Thanks for the reply, I used this before, and was looking for a flexbox solution, but this will suffice until I learn more on overflows.

I only made a change to your code here (besides the sizes):

  • used overflow-y: auto; so that the scroll ONLY appears in the Y-Axis, and only if the screen hides something. Not totally small screen proof but it works.

thanks again!

Yes, you are using the pre element correctly. It’s used to nest multi-line <code> snippets in HTML to preserve whitespace and line breaks.