Why is my Technical Documentation not working on mobile?

Code Feedback
1

I’m clueless as to why my TechDoc is larger than the screen width on my iphone 7+ when I look at it in portrait.

https://codepen.io/BuddhiBadugi/pen/gjJRNO

If I resize the viewport on my pc to the size of the phone, everything looks fine. But on the phone, I never see all content without having to scroll.

I’m especially weirded out, because other pages I built in a similar way totally work out.

Feedback appreciated, not only to this specific issue, but also about my code in general.

Thanks a lot!

2

The copy breaking out of the code block under ‘Topic E’.

Try adding white-space: pre-wrap; to your css to allow the copy to wrap with the code block correctly.

1 Like
3

Added it to code { …} . That worked. Thanks a lot, didn’t notice that breaking out of the form. It’s because I used 

 to get the lines indented. Would there have been another way to achieve that=