Our Work
See some of our best, most challenging projects.
See some of our best, most challenging projects.
We have 10+ years of Craft CMS development experience.
One of our popular blog posts comparing Craft and WordPress.
We love to work with maps. Learn more about Mapbox in this post.
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.
Shopify's Dawn theme homepage may get an SEO warning for an empty h1 header element. This is a missed opportunity to help search engines understand what your page is about. Small edits to the theme code can fix this technical SEO issue.
Shopify's default Dawn theme displays empty alt tags for collection images. This post explains how to fix blank alt tags for Shopify collection images to improve your Shopify store's accessibility and SEO.
Feastables, from YouTube star MrBeast, is a food brand making and selling "MrBeast Bars" through a fun Shopify store. Customers buy bars to enjoy really good chocolate and get chances to win prizes.