How to Build a Full-Screen Responsive Page With Flexbox

In this tutorial, we’ll learn how to build a full-screen responsive page with flexbox. Our page will include a full-screen background image, vertically centered content, and a sticky footer.

Here’s a quick look at the page we’re going to build (the full screen version might give you a better idea):

Note: this tutorial assumes you have some understanding of flexbox. For beginner resources, take a look at these tutorials and courses:

1. Define the Container

We begin by defining a container, in which we place three elements. A header, a main, and a footer. Here’s the page structure:

<div class="wrapper">
  <header class="page-header">
    <!-- content here -->
  </header>
  <main class="page-main">
    <!-- content here -->
  </main>
  <footer class="page-footer">
    <!-- content here -->
  </footer>
</div>

We want the page to be at least full-screen, but when the page height is greater than the browser window height, we want a scrollbar to appear.

Thanks to flexbox, we’re able to create this functionality very easily. Here’s the required CSS:

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wrapper > * {
  padding: 20px;
}

.page-main {
  flex-grow: 1;
}

By setting flex-grow: 1 on the main element, it expands to cover the available space inside the flex container. The header and footer elements have their default widths based on their content.

Internet Explorer Caveat

Some versions of Internet Explorer don’t work well when a flex container has a minimum height. In our example (if you’re interested in supporting IE), one way to solve this issue is to add the following rule:

body {
  display: flex;
  flex-direction: column;
}

Another straightforward workaround is to replace the min-height: 100vh with height: 100vh.

In any case, if there’s a need to support IE in your projects, choose the method that works best for your content and layout.

Progress so Far

Here’s the starting pen we’ve built (including some colors for clarity):

Let’s now have a closer look at the container’s descendants.

2. The Header

Our page header includes three elements. The logo, the navigation, and a call-to-action button. Here’s the header markup:

<header class="page-header">
  <nav>
    <h2 class="logo">
      LOGO
    </h2>
    <ul>
      <!-- list items here -->
    </ul>
    <button class="cta-contact">
      get in touch
    </button>
  </nav>
</header>

Its layout changes depending on the viewport size. On narrow screens (<550px), it looks like this:

On wider screens, the layout changes as follows:

To achieve this slight layout shift our styles have to fulfill the requirements below:

The elements should be vertically aligned.
On small screens the menu should be the last element, while on wider screens the button should be the last one.
On small screens the header elements are wrapped into two lines. The navigation itself covers the second line. On larger screens all elements are evenly distributed in a single row.

Following a mobile-first approach, let’s look at the most crucial rules for our header:

.page-header nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.page-header ul {
  display: flex;
  order: 1;
  width: 100%;
  margin-top: 15px;
}

@media screen and (min-width: 550px) {
  .page-header ul {
    width: auto;
    margin-top: 0;
  }

  .page-header .cta-contact {
    order: 1;
  }
}

Tip: the default order value of the flex elements is 0. Elements with same order values are laid out according to the order they appear in the source document. For this reason the button comes after the navigation on wide screens (≥ 550px).

3. The Main Content

The main content of our page consists of some text which is vertically centered and sits on top of a background image.

The appearance of the main section of our page

Here’s the structure for this section:

<main class="page-main">
  <div>
    <!-- content here -->
  </div>
</main>

And the most important styles, including CSS variables:

/* variables */
:root {
  --main-white-color: white;
  --main-purple-color: #9e89b8;
}

.page-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 350px;
  background: var(--main-purple-color) url(IMG_SRC) no-repeat center / cover;
  background-blend-mode: luminosity;
  color: var(--main-white-color);
}

.page-main div {
  max-width: 500px;
}

@media screen and (min-width: 768px) {
  .page-main {
    padding-left: 90px;
  }
}

Nothing very complicated happens here. Again, thanks to flexbox we’re able to vertically center the main contents. Plus just for fun, we apply a blend mode in the browsers that support it.

Color

Blending Modes in CSS: Color Theory and Practical Application

Jonathan Cutrell

4. The Footer

The page footer includes two elements; one which holds copyright information, and another with links to social media channels. Here’s the markup:

<footer class="page-footer">
  <small>
    <!-- content here -->
  </small>
  <ul>
    <!-- list items here -->
  </ul>
</footer>

Again, the layout here should change depending on the viewport size.

On narrow screens (<550px), it looks like this:

On wider screens, the layout is as follows:

Considering the screenshots above, the following things should happen:

On small screens the text should be the last element, while on wider screens the social profiles list should be the last one.
On small screens the footer elements are wrapped into two lines. On the other hand, on larger screens all elements are vertically centered and evenly distributed in a single row.

The main styles for our footer:

.page-footer {
  display: flex;
  flex-direction: column-reverse;
}

.page-footer ul {
  display: flex;
  font-size: 1.5rem;
  margin-bottom: 5px;
}

@media screen and (min-width: 550px) {
  .page-footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .page-footer ul {
    margin-bottom: 0;
  }
}

Icons

Last but not least, for the icons used in this section I’ve incorporated the Ionicons icon pack into our pen.

Conclusion

In this tutorial we covered the process of creating a full-screen responsive page with flexbox. The process was straightforward and gave us the opportunity to practice a few different flexbox skills.

In an upcoming tutorial, we’ll go one step further and examine how to animate the elements on this page. See you then!

Enhance the Way a Web Page Loads With CSS Animations
In a previous tutorial we created a full-screen responsive page with flexbox. Today, we’ll make this page more attractive by adding a few CSS animations to it.

George Martsoukos
11 Dec 2018

CSS Animation