Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Flexbox
Webdesign

How to Build a Full-Screen Responsive Page With Flexbox

by
Difficulty:IntermediateLength:ShortLanguages:

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:

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:

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:

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:

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

The header appearance on narrow screens

On wider screens, the layout changes as follows:

The header appearance on wide screens

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:

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:

And the most important styles, including CSS variables:

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.

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:

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

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

The footer appearance on narrow screens

On wider screens, the layout is as follows:

The footer appearance on wide screens

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:

Icons

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

The required CSS settings

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.