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

Html – CSS grid layout and pre formatting on mobile devices

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Problem solved. I had to define width values for the body element's children for both large and small screens separately:

    @media (min-width: 60em)
{
    body > * {
        width: 50em;
        min-width: 30em;
        max-width: 50em;
    }
}

@media (max-width: 59em)
{
    body > * {
        width: 20em;
        min-width: 20em;
        max-width: 20em;
    }

    Thanks again to aabdulahad for his suggestion!


  2. 0

    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:

    body {
  display: grid;
  justify-content: center;
  grid-auto-flow: row;
  gap: 4px;
}

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;
}

@media (min-width: 80em) {
  body {
    width: 60em;
    max-width: 60em;
  }
}
    <header>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at elementum nunc, sed tincidunt massa. Vestibulum rhoncus, libero nec porttitor gravida, orci arcu commodo est, sodales tristique neque eros vulputate mi. Curabitur ac lorem mattis, suscipit
  massa rutrum, suscipit metus. Aenean non leo malesuada, facilisis velit ac, mollis magna. Mauris in magna et leo porta malesuada. Donec blandit mi orci, at lacinia libero facilisis ac. Sed at felis lectus. Quisque et pharetra mi. Praesent vel mi id
  leo condimentum accumsan vitae lobortis nibh. Aliquam quis sapien et libero semper malesuada quis vitae dolor. Sed dapibus consectetur turpis nec tempus. Pellentesque elit erat, dapibus eget gravida quis, commodo at leo. Maecenas non blandit nunc.
</header>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at elementum nunc, sed tincidunt massa. Vestibulum rhoncus, libero nec porttitor gravida, orci arcu commodo est, sodales tristique neque eros vulputate mi. Curabitur ac lorem mattis, suscipit
  massa rutrum, suscipit metus. Aenean non leo malesuada, facilisis velit ac, mollis magna. Mauris in magna et leo porta malesuada. Donec blandit mi orci, at lacinia libero facilisis ac. Sed at felis lectus. Quisque et pharetra mi. Praesent vel mi id
  leo condimentum accumsan vitae lobortis nibh. Aliquam quis sapien et libero semper malesuada quis vitae dolor. Sed dapibus consectetur turpis nec tempus. Pellentesque elit erat, dapibus eget gravida quis, commodo at leo. Maecenas non blandit nunc.</div>
<p class="code">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at elementum nunc, sed tincidunt massa. Vestibulum rhoncus, libero nec porttitor gravida, orci arcu commodo est, sodales tristique neque eros vulputate mi. Curabitur ac lorem mattis, suscipit
  massa rutrum, suscipit metus. Aenean non leo malesuada, facilisis velit ac, mollis magna. Mauris in magna et leo porta malesuada. Donec blandit mi orci, at lacinia libero facilisis ac. Sed at felis lectus. Quisque et pharetra mi. Praesent vel mi id
  leo condimentum accumsan vitae lobortis nibh. Aliquam quis sapien et libero semper malesuada quis vitae dolor. Sed dapibus consectetur turpis nec tempus. Pellentesque elit erat, dapibus eget gravida quis, commodo at leo. Maecenas non blandit nunc.</p>
<footer>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at elementum nunc, sed tincidunt massa. Vestibulum rhoncus, libero nec porttitor gravida, orci arcu commodo est, sodales tristique neque eros vulputate mi. Curabitur ac lorem mattis, suscipit
  massa rutrum, suscipit metus. Aenean non leo malesuada, facilisis velit ac, mollis magna. Mauris in magna et leo porta malesuada. Donec blandit mi orci, at lacinia libero facilisis ac. Sed at felis lectus. Quisque et pharetra mi. Praesent vel mi id
  leo condimentum accumsan vitae lobortis nibh. Aliquam quis sapien et libero semper malesuada quis vitae dolor. Sed dapibus consectetur turpis nec tempus. Pellentesque elit erat, dapibus eget gravida quis, commodo at leo. Maecenas non blandit nunc.</footer>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search