Hello!
https://codepen.io/Novumel/pen/WNvjNNr?editors=1100
I need to make the area with < code > able to stretch (a scrollbar must appears), and the width of the text remains unchanged at the same time. As soon as I put white-space: pre; for the tag < code > (now it’s not in the project), the text area begins to depend on the < code > area.
I tried to write all max-width for text and for < code > with Media queries, but this is a lot of unjustified work.
Sorry in advance if my description is not clear.
I’m not sure what you’re looking for. It looks like your page is fine when I am testing the responsiveness of it. The code scales very well.
Are you trying to have it so all of your < code > is on one line?
yes, you’re right. My page is ok until I add white-space: pre for < code >.
I’m not sure what you’re trying to do. When adding white-space: pre;
to the code
declaration in CSS it’s saying to preserve the whitespace and line breaks as you typed then into the HTML section.
It’s the same as surrounding the <code> </code>
tags with <pre> </pre>
tags.
Why would you have a scrollbar when something stretches? Did you mean when it’s made smaller?
You have something in mind but we’re not understanding what you’re trying to accomplish.
Without code {white-space: pre;}
With code {white-space: pre;} and max-with 400px
I need like that (scroll-x):
I don’t see where you put max-width
here
I mean width of the screen.
On a wide screen the page looks ok. But as soon as the longest line of the < code > ceases to fit in the width of the text area, everything goes beyond the viewing area.