Technical Doc.Page - Styling code tag


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:

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??

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;
1 Like

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”.