avatar

Andres Jaimes

Redistribute your webpage contents to fit your browser width

By Andres Jaimes

Are you tired of dealing with different screen sizes for your web pages? Well, this information is for you.

I will show you some CSS tricks to help you reorganize a webpage depending on your browser window width.

We will start with a simple HTML 5 skeleton that includes a contents and a navigation section:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    /* we will add our style here on the next step */
  </style>
</head>
<body>
  <div role="main">
    <h1>This is the contents</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Nunc venenatis ante sed augue porttitor at volutpat felis
       consequat. Pellentesque eget neque vel erat cursus
       fermentum. Cras convallis eros malesuada lectus condimentum
       a semper eros sollicitudin. Phasellus bibendum, elit in
       facilisis volutpat, felis nisl venenatis mauris, non
       vestibulum diam urna id eros. Proin augue mauris, aliquam
       condimentum suscipit vel, semper sit amet orci. Pellentesque
       eleifend, sem in feugiat ultrices, lacus diam luctus turpis,
       quis malesuada dui risus et magna. Donec egestas, ligula in
       faucibus accumsan, lacus nibh condimentum urna, vel pulvinar
       nulla mi quis turpis. </p>
  </div>
  <nav role="navigation">
    <h2>This is the navigation.</h2>
    <ol>
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
      <li><a href="#">Option 3</a></li>
    </ol>
  </nav>
</body>
</html>

Pretty simple uh? Now, we will add some CSS between the style tags in the head section. This CSS will do the magic depending on our window width.

@media screen and (min-width: 30em) {
    body {
        display: table;
        caption-side: top;
    }
    [role="navigation"] {
        display: table-caption;
    }
    [role="navigation"] ol {
        display: table-row;
    }
    [role="navigation"] ol li {
        display: table-cell;
        padding: 0.5em;
    }
}

Try changing your browser size and see how your webpage redistributes itself to fit your contents and navigation section in a nice way.

So what happened? Well:

@media screen and (min-width: 30em) checks if media is a computer screen and it has a minimum width of 30 em’s. If both conditions are met, then:

body { display: table; caption-side: top; } treats the body contents as if it were a table, setting the caption-side to show on the top.

[role=&#8221;navigation&#8221;] { display: table-caption; } uses an attribute selector to set the tag marked with the navigation role as the table caption, thus sending it to the top of the page.

[role=&#8221;navigation&#8221;] ol { display: table-row; } sets the ol inside the tag marked with the navigation role to be treated as a table row, so in short, the ol will be displayed as a row.

Finally, [role=&#8221;navigation&#8221;] ol li { display: table-cell; padding: 0.5em; } instructs the browser to treat every li inside an ol inside a tag marked with the  navigation role as a table cell. That is why the list items are displayed in a contiguous way. Just like cells in a table row.

And that’s it! When the first condition is not met (min-width: 30em) then the page shows as originally layed on the html. You can keep adding conditions depending on what you want to accomplish. You can find more conditions on the W3C webpage.