Technical Doc.Page - Styling code tag

1

Hello,

I am trying to style my code tag so that the background doesn’t resize independently
when I’m resizing the screen.

Here is my pen: https://codepen.io/nenna_e/pen/LYENNrq?editors=1100

As you see now, when you resize the preview, the background-color of the code tag, moves.
This is what I want to prevent,

How do I fix this??

2

Hello,
You can always apply a min-width to the all code elements. That way it will stop resizing at a certain point.

code {
  display: block;
  background-color: #ebf3fa;
  border-radius: 5px;
  padding: 15px;
  color: blue;
  min-width:800px;
  
}
1 Like
3

Now, the code ( text ) doesn’t resize with the screen. How do I solve that? I want the whole thing
to resize together with the background, but the text is now “static”.

4