Thank you for joining me for the second installment of my journeys through beginner cloud development.
You probably guessed by now. Mobile scalability took a bit longer than i anticipated.
Quite a bit longer.
The reason for this is two-fold.
- I'm trying to stay as true to the tasks of The Cloud Resume Challenge as possible. This did not include learning Bootstrap. I've seen some really slick cloud resumes out there, a lot of which were developed with the Bootstrap framework. If i decide to explore web development further than this challenge, learning Bootstrap or something similar seems the intelligent decision.
- I'm using as much of my own code here as possible. I've never before written a CSS file from scratch, or designed a site using only on what i learned from W3Schools. I didn't want to drop in a Bootstrap template, i wanted to own what i'm publishing and learn from it. Thus i have to balance my impatience with my initial purpose for undertaking this challenge to begin with: to boldly go where no me has gone before.
If you're unsure where this ship is heading, allow me to introduce you to the wonderful world of viewports. Per Mozilla
A viewport represents the area in computer graphics being currently viewed. In web browser terms, it is generally the same as the browser window, excluding the UI, menu bar, etc.
The size of the viewport depends on the size of the screen, whether the browser is in fullscreen mode or not, and whether or not the user zoomed in.
It can sound pretty complicated. Especially the first time you look at just how many devices and viewports are out there. I spent more than a couple hours toggling different mobile viewports in my browser's developer mode trying to figure out why my resume looked as expected on my iPhone XR but not on my wife's iPhone 12 or my son's Pixel. Even after researching i was still a bit confused.
Ultimately, after numerous trials, errors, and comedies, i determined that i needed to modify my content width and margin sizes individually for various smaller screen sizes. In the interest of simplicity, i chose to stick with what i feel are the three most prevalent viewports in the wild: 360px, 375px, and 414px. I created an @media rule in my CSS for each of these sizes and...
Success!
I'll take no shame in admitting my exhilaration when i loaded my local file to each viewport size in my developer console and saw my page render precisely as i've been wanting all these weeks. I didn't cry, but it was touch and go there for a moment.
Productivity Points
Huge thanks to the developers of JSFiddle - this site has saved me so much time and i can't recommend it enough for beginners to web development.
Top comments (0)