I try to move a fairly simple website to a grid layout. The HTML looks like this:
<body>
<header> ... </header>
<div> ... </div>
<footer> ... </footer>
</body>
The body
element’s children are displayed in rows and, on non-mobile devices, are supposed to be 60em wide:
body
{
display: grid;
justify-content: center;
grid-auto-flow: row;
gap: 4px;
max-width: 80em;
}
@media (min-width: 751px)
{
body > * {
width: 60em;
max-width: 60em;
}
}
This works well (on any device) except for pages which contain a paragraph of class code
, formatted like this:
p.code
{
font-family: monospace;
white-space: pre;
padding: 1em 2em 1em 2em;
background-color: #CCC;
border: 1px #333 solid;
margin: 2em 3em 2em 3em;
overflow: auto;
}
In this case, the page is displayed much too wide on mobile devices. With my previous (non-grid) design, the code
paragraphs were rendered properly for small screens (and you had to scroll horizontally for longer lines of code). What can I do to avoid this issue with the grid-based layout?
2
Answers
Problem solved. I had to define width values for the
body
element's children for both large and small screens separately:Thanks again to aabdulahad for his suggestion!
I think the discrepancy comes from the fact that
751px !- 60em
so I have used that in the media query. I have also modified the media query to involve the body only.Try this: