< Back to Notes

Getting the site to display on mobile

I want the site to be readable on mobile, so I delved into the basics of responsive CSS, or at least that is scales decently. Years ago, I was doing some web development, just as responsive was taking off. Since then I didn't really keep up to date. I've heard of many new concepts like grids, flexbox, mobile first, css normalization and what have you. But I wanted to build an old-school web site, the old-school way. Without the deprecated parts, like frames. And without too much of the newer stuff so it doesn't get too complicated. Because I like the pain of building from scratch, I didn't use any boilerplate.

I designed on desktop for desktop first. Only then I checked how it looked on mobile. The first result was ... let's say surprising. It wasn't completely broken, but I was baffled that different pages were differently scaled. Pages with very little content (less than a screen width) didn't scale. Pages with full-width content scaled fine. I was hoping that at least this would work without media queries. I couldn't figure it out, so I added some basic queries for width. That looked promising at first. It seemed to work fine when I resized the desktop browser window. But it still didn't scale when using the Dev Tools device toolbar.

I figured I was missing something. The interwebs provided. This little meta tag solved it for me: <meta name="viewport" content="width=device-width">. Found where else than Stack Overflow. Some tweaking was needed, but from here on things started making sense. I was finally able to make the basic scaling work.

Some pages still didn't scale to smaller screens properly. This was because of text that was not wrapping/breaking into the next line, but instead stretching the page horizontally. I had to fix several elements: