My Coding Journey: Week 2 — Rabbit CPR
You may remember from last week’s post that I had managed to create an adorable HTML/CSS bunny. Features included the bunny blinking, twitching its nose, flicking its ear and blushing, as well as a mini galaxy in the background, complete with twinkling and shooting stars.
One feature which was not included, however, was responsiveness. Every time the viewport was resized, the bunny’s facial features dispersed around its head in a manner which Gunther von Hagens would be proud of.
After numerous unsuccessful attempts at using grids, flexbox, container-fluids and God-knows-what-else, it eventually dawned on me (by which I mean that I finally stumbled across it on W3Schools after hours of hammering my fingers into bloody stubs against the keyboard, sorry, I mean diligent research), that all I needed to do was to define my bunny’s height and width as percentages instead of pixels.
With the benefit of hindsight, I can now say that this should have been painfully, painfully obvious.
I have a strong suspicion that this effect, which took me about 15 lines of code, could probably have been achieved in about five (or one!), but for now I am just elated that I can finally view my bunny on more or less any screen size without its eyes becoming disconnected from its face.
I suppose what this endeavour has taught me (apart from the difference between absolute and relative size values), is that, as the famous saying goes,
“There are certain life lessons that you can only learn in the struggle.”
Or, as in this case, by Googling the right thing the first time round.
