Popular Pages

Our Work

See some of our best, most challenging projects.

Craft CMS

We're Craft CMS experts (and an Official Partner).

Creating a Flexbox Sticky Footer with Tailwind

David Musk Mar 19, 2021 Read time: 2 minute read
Creating a Flexbox Sticky Footer with Tailwind

With Tailwind CSS utility classes, making a flexbox sticky footer is easier than ever.

Back in 2016, we wrote a post called Creating a Sticky Footer with Flexbox. Not much has changed since then. If you want to push your footer to the bottom of the browser (regardless of your content size) then this is still one of the better methods. We’re using this technique on our own site today, along with most of our clients’ sites.

But if you’re using Tailwind as your front-end framework, this is easier than ever! Before, you had to write custom CSS for multiple elements and/or classes. Now, you can achieve an identical effect with just a few Tailwind utility classes:

<body class="flex flex-col min-h-screen">
    <header>...</header>
    <main class="flex-auto">...</main>
    <footer>...</footer>
</body>

The first two body classes (.flex and .flex-col) turn the body element into a vertical flex container.

.min-h-screen matches the element's height to the user's browser height.

Finally, flex-auto expands the main element to fill the available space, pushing the footer to the bottom of the screen.

Using these utility classes is the same as adding the following CSS to your body and main elements:

body {
    display: flex; // .flex
    flex-direction: column; // .flex-col
    min-height: 100vh; // .min-h-screen
}

main {
    flex: 1 1 auto; // .flex-auto
}

And that's it! If you start your next Tailwind project with this markup, then you’ll never need to worry about your footer riding up on short pages.

You can view a working example of this at Codepen. You can also check out the Tailwind Docs for a more in-depth explanation regarding these utility classes.

Subscribe to our newsletter!

A few times a year we send out a newsletter with tips and info related to Craft CMS, technical SEO, and things we find interesting. No spam. Unsubscribe any time.

You Might Also Like

Laravel Mix and Craft CMS

Craft CMS and Laravel Mix

Catherine Kleimeier Jul 7, 2021  ·  13 minute read

We updated our build process for Craft CMS websites from a difficult to maintain Gulp process to one that uses Laravel Mix, which is easier for us to maintain, and more easily allows us to do advanced optimization.

Organizing Craft CMS Assets

Organizing Assets in Craft CMS [New Video]

Catherine Kleimeier Jun 3, 2021  ·  1 minute read

Effective file management and organization is an often-overlooked feature of a content management system. Doing it right helps with everything from boosting SEO to saving server space. Our video demonstrates how to organize assets in Craft CMS.

Converting Google Maps to Mapbox

Converting Google Maps to Mapbox

Catherine Kleimeier May 27, 2021  ·  5 minute read

If your website has a Google Map on it that hasn't been touched in years, there's a pretty good chance that it doesn't work anymore. If your Google Map no longer works because you don't have a valid billing account, or if you want a unique (less expensive) map solution, consider switching to Mapbox! In this post, we'll show you how we did it on our own site.