Hello Guys,
I’m currently working on the technical documentation project, and I have a problem that Im not able to solve.
I want my text to wrap within the container when the viewport width is reduced, but it stops wrapping after a point.
I used overflow-wrap and word-wrap properties, but I’m not able to get the desired outcome.
How do I solve this?
Link to Codepen: https://codepen.io/sambarvadai/pen/BajERPq
It’s the code blocks that are causing this. First, you’ve got width: 100vmin set on the <code> tag which is going to keep the tag from narrowing. Second, you are preventing the lines of code from wrapping so as soon as you narrow the browser less than the longest line of code (which is under the “It’s all about a choice” heading) then you are going to get a horizontal scroll bar.
My suggestions would be to get rid of the width on the <code> tag, reduce the amount of space to the left of the code blocks, and reduce those long code lines (for example, the real long ones are comments so you can easily split those comments into two shorter lines and place them above the line of code they are commenting).
1 Like
I looked at the long lines and split it to a more shorter one.
Now I realised why the width property would cause this. Will rectify this for sure.
Thank you for the feedback 