2

Question

I want to have a <pre> code block in a grid layout.

This should be responsive. When the space is to small, it should be able to scroll horizontal.

What I did

body{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-template-areas: "h h h h h h h h h h h h"
                             ". a a a a a a a a a a ."
                             "f f f f f f f f f f f f"
}
main{
        grid-area: a;
      }
pre{
        padding: 1em;
        overflow-x: scroll;
        background: #454649;
        color: white;
}
<body>
  <main>
    <pre><code>Footprint: 88C3 EC7D 458A BB70 B92F 35C1 72C2 CFAE 2E71 F6E2</code></pre>
  </main>
</body>

What it looks like:

Picture: What it looks like

What I want

It should be responsive and should be inside of the grid-area: a.

Picture: What I want

Community
  • 1
  • 1

2 Answers2

4

Setting the min-width of the main element to 0 should be sufficient, see below:

body{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-template-areas: "h h h h h h h h h h h h"
                             ". a a a a a a a a a a ."
                             "f f f f f f f f f f f f"
}
main{
        grid-area: a;
        min-width: 0;
}
pre{
        padding: 1em;
        overflow-x: scroll;
        background: #454649;
        color: white;
}
<body>
  <main>
    <pre><code>Footprint: 88C3 EC7D 458A BB70 B92F 35C1 72C2 CFAE 2E71 F6E2</code></pre>
  </main>
</body>
Piotr Wicijowski
  • 1,975
  • 9
  • 15
-1

Make things according to the functional requirements. The best way to use media query to target small devices and make the overflow scroll. Here is the code just place it into your css file.

@media (min-width:320px) and (max-width:667px){
pre{
    width: 260px;
    overflow-x: scroll;
    padding: 20px;
    background: #ccc;
  }
 }
shahid
  • 484
  • 3
  • 10