CSS, A responsive footer

A thorough walkthrough of three approaches to creating a responsive footer.

Panama City, Panama; buildings == footer ?

Outline

0. Intro
1. The first approach: "position absolute/fixed"
2. The second approach: "vh"
3. The third approach: as always, flexbox "flex"
4. Conclusion

0. Intro

Though smart contracts are usually the core part of a DeFi project, an easy-to-use & informative website also serves a crucial role. Therefore, the first article of this publication is about CSS frontend coding: footers!

Curve, my favourite UI design in DeFi; though this is perhaps another man’s trash ;)

While I was learning frontend coding with this course (an amazing one, definitely recommend it!), I decided to make a website for my lab as a side project. However, it wasn’t until using a larger screen recently did I found that the footer I made before was missing the responsive aspect (RWD).

Zoom in/out 100% on a 13-inch screen; the footer looks pretty normal

Using the website I made for my lab as an example ;)

Zoom out 75%; the footer goes off :(

Footer? More like a floater.

1. The first approach: “position absolute/fixed”

The first approach makes the position of the footer “absolute” (“fixed” has a similar effect) and also gives a margin between the footer and the bottom of the page.

Zoom in/out 100%

However, if we zoom in to 110% …

Obviously, the layout is broken as the position of the footer is absolute/fixed :(

2. The second approach: “vh”

Giving each section customized numbers as fixed heights using “vh” (the % of the vertical height) can keep the footer at the bottom, but is still not 100% responsive:

Zoom in/out 100%

Zoom out 75%; the footer stays at the bottom but is not 100% fixed to it

The footer is more like a floater.

The reason is that as the section takes up 10% of the vertical height, the texts get smaller and farther from the bottom when we zoom out further.

3. The third approach: as always, flexbox “flex”

Flexbox comes to rescue as always! To start with, by setting display: flex & flex-direction: column, the layout can grow vertically.

Now, the magic sauce here is to set the element above the footer flex: auto. Let’s take a look at the explanation on MDN:

https://developer.mozilla.org/en-US/docs/Web/CSS/flex#:~:text=0%201%20auto%20%22.-,auto,its%20width%20and%20height%20properties.

In simple terms, flex: auto allows the specified element to extend to any extra space in the container, which keeps the footer at the bottom!

Zoom in/out 100%

Zoom in/out 110%

A 13-inch screen is too small for accommodating everything ;(

Zoom in/out 75%

Voila! We solve this! 💯💯💯

4. Conclusion

Although according to the above explanation flexbox seems to be the ideal solution, I highly suspect this is only me not being able to find another approach other than flexbox :( If you happen to know, leave a comment below and I’ll check it out for sure!

Lastly, allow me to say a few more words. There is another reason why I choose CSS as the first topic of this publication. For quite a lot of developers, CSS may be considered unimportant or “lack of logic” comparing to other programming languages, such as Python, Javascript, etc.

For me, however, I enjoy writing CSS and trying out different ways to achieve an effect. Writing CSS perhaps does not require an algorithm, but it definitely takes time & knowledge to write it elegantly and make the appearance adjustable to all kinds of devices!

If this article helps you get to know a bit more with CSS, stay tuned and there will be more to come!