No Time Dad

A blog about web development written by a busy dad

CSS Responsive Container

I’m a big fan of Bootstrap’s container class. The idea of a container is that it creates uniform space around sections of a page. Having space on either side of the content makes a page look cleaner and more presentable, especially the same amount of space.

What I usually need is a responsive container. One that changes with the size of the screen. Bootstrap’s container class is responsive, but I need all of Bootstrap to use it. Which isn’t convenient, especially when I’m not using Bootstrap in a given project.

Below is an example of a simple responsive container selector and how it could be applied to a standard header-content-footer page layout.

container-resize

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Container Example</title>
  </head>

  <body>
    <header>
      <div class="container">Header</div>
    </header>
    <main>
      <div class="container">Content</div>
    </main>
    <footer>
      <div class="container">Footer</div>
    </footer>
  </body>
</html>
/* styles.css */

/* Resets */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* Container */
.container {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;

  /* Visual helpers */
  border: 1px solid gray;
  padding: 1rem;
}

@media (min-width: 768px) {
  .container {
    max-width: 700px;
  }
}

/* Page sections */
header {
  background-color: lightcyan;
}

main {
  background-color: lightgray;
}

footer {
  background-color: lightgoldenrodyellow;
}

A lot of the css above is purely for visual purposes to make it easier to see how the container changes based on the size of the screen. It also includes a few “resets” to remove some extra spacing added by some browsers. The real start of the show is the container selector and the media query displayed above.

.container {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .container {
    max-width: 700px;
  }
}

I’d consider this example to be “mobile first” since it uses min-width in the media query. Which means that the container selector will change to have a max-width of 700px when the screen size hits 768px width or larger.

I typically consider any width 400px or less to be “extra small”. In this example, those screens would not display any space on the left or right. Between 400px and 700px in width is where you’d start to see space on the left and right start to appear.

<header>
  <div class="container">Header</div>
</header>

Its worth noting that I’m not applying the container class directly to the header, main, or footer html elements. The reason for this is that I want them to span the entire width of the page. Then, if I apply a background-color property it won’t have gaps on the left and right. This doesn’t matter as much if the background is going to be white, but usually at a minimum I’m adding some color to a nav bar or footer.

One more thing worth pointing out in this example is that the footer isn’t at the bottom of the page. This is because there isn’t much content in the main section to push it down. I could force it down using flexbox or height 100vh, but usually I just let the content take care of it for me. If I knew my content would be short I might try to force it to the bottom but that’s rare for me, to be honest.