How can I make <pre> responsive

As you can see the text in <pre> isn’t responsive. How can I fix this?

https://codepen.io/aetones/pen/jObgVeM

Also, the header for my sidebar is underneath my sidebar and only shows if it’s a child of my <ul> element. How can I fix this?

Without seeing your code we can’t possibly help. Post a Codepen with your code.

I thought I did, I’ve added my pen now.

  1. If you add white-space: pre-line or white-space: pre-wrap to the pre or code elements the text will wrap.

  2. What I would suggest is to move the ul styles to the nav element instead. Then you can keep the header in the nav and remove the one in the ul. You will obviously have to fix your media queries as well.

Just as an FYI, if you added position and a z-index to the header you would see it.

Both of these options work great, but a new problem has arrived. The bullets on my navbar have appeared and I’ve tried adding ul list-style-style:none; to my <ul>, but it does nothing.

list-style-style is incorrect. It’s just list-style.

1 Like

Dang! I totally missed that. Thank you.