Question 207468 in Html Question posted in
Some basic documentation can be found here.

Html – CSS for pre and code tags not working on mobile device

I have a blog and I wish to insert a code block inside my post using simple <pre> and <code> tags using CSS.

pre code {
  background-color: #eee;
  border: 1px solid #999;
  display: block;
  padding: 10px;
  height: 200px;
  overflow: auto;
}

It’s working well in desktop view but it’s not working on my mobile phone (especially for elements: background, border, overflow, and display). What did I do wrongly? I’m expecting the code block will be seen as in the desktop view.

Tags:

2

Answers


  1. 0

    For mobile responsive components and design, you need to add this in the HTML:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    You can then update the CSS with screen responsive styling properties with media queries like this:

    @media screen and (min-width: 480px) {
  body {
    background-color: red;
  }
}
    Login or Signup to reply.
  2. 0

    Are you using a third-party blog website? Maybe your blog website is applying styling to narrow viewports (such as mobile devices) that is overriding your CSS. Use Developer Tools in your desktop browser to see what happens at narrow breakpoints.

    If your CSS is applied from an external stylesheet, maybe your phone browser is using a cached CSS file.

    pre code {
  background-color: #eee;
  border: 1px solid #999;
  display: block;
  padding: 10px;
  height: 200px;
  overflow: auto;
}
    <pre>
  <code>
    pre code {
      background-color: #eee;
      border: 1px solid #999;
      display: block;
      padding: 10px;
      height: 200px;
      overflow: auto;
    }
  </code>
</pre>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search