Building a Flexible and Responsive Footer with Vue and Tailwind

Since I had just finished creating components for each icon, I figured this was a good time to justify why using a component is better than a regular <img> tag—ease of reusability.

For the first time, I started viewing my Figma design in terms of flexbox. I asked myself: What do I want to achieve for each screen size? The more I worked with frontend layouts, the more I realized that a website is just a bunch of <div> containers, each with flexbox rules to decide how they hold their contents. And inside those <div> elements? More flexboxes with their own rules. It’s basically flexbox inception.

(Insert Inception meme here.)

The more I work with frontend design, the more I realize how much there still is to learn. Anyway, I started by determining the height of the footer. Unlike my navbar, which currently has a max-height, I decided to set a fixed height for the footer and adjust it dynamically for different screen sizes.

After some trial and error, I settled on a height of 120px. I wanted the footer items stacked on top of each other, so I set the flex direction to column. To center everything horizontally, I applied align-items-center. Here’s an important flexbox insight:

• If flex-direction: column is used, the main axis runs vertically (top to bottom), and align-items: center centers items horizontally.
• If flex-direction: row is used, the main axis runs horizontally (left to right), and align-items: center centers items vertically.

It took me longer than I’d like to admit to fully grasp that, and every time I revisit flexbox, I still have a mini mental breakdown trying to get the alignment right.

Once the alignment was sorted, I added a simple copyright notice and social media icons for external links. The footer is minimal for now, but it serves its purpose—it appears throughout the app and provides the necessary structure.

Of course, I made the footer a Vue component and added it to App.vue so it appears on all pages. However, I’m already noticing a small issue—closing the navbar sometimes conflicts with it. That’s a problem for future me to solve.

And with that, we’re one step closer to a fully functional website! The next step is deploying CosmosDB to store real blog posts and updating the linked Azure Function app to handle dynamic content.

Till next time, remember:

“

Consistency is hard but necessary to achieve your goals. Even 15 minutes a day adds up over time.

”