Changing HTML With Media Queries

AUGUST 9th, 2017

A day or two ago I stared at my monitor for about an hour all because of the text in the header of this blog. The text "Patrick Eakin | Not Quite A Software Developer" was all on one line. Also, I was using the relative unit vmax so the font size would adjust relative to the width of the browser. This was fine and dandy until you looked at the page on a mobile device and suddenly needed a microscope to read the thing.

At smaller browser widths I need the text large enough to be easily readable. That would be made easier if I got rid of the "|" and moved "Not Quite A Software Developer" to it's own line at those decreased widths.

This seemed like an easy thing to do. I could use a media query to change the size of the font at a width of 500px. To incorporate a new line in the header I could use the same media query to increase the height of the black background behind the text. All this is nothing more than updating the CSS when the browser width is decreased. But the line break tossed me into a staring match with my monitor. The <br> tag is HTML, not a CSS style. How on earth do I change the HTML at a particular browser width?

I have an aversion to looking something up until I'm sure that I'm completely unable to discover the answer somewhere in my brain. If I have to struggle with a problem before I have a solution, that solution sticks. If a solution is just handed to me, I won't understand it, I won't remember it and I won't learn a thing. Normally, I can try some ideas. I can write down exactly what I want to happen and then some way forward will come to me. But this time nothing happened in my brain. Just a bleak expanse of emptiness.

So, I looked it up. Then promptly facepalmed.

The fact that CSS is styling HTML elements was stored in the part of my mind that understands something implicitly. I had never made it explicit. So when I needed an HTML tag to exist only under a certain condition, my subconscious modeling of CSS's purpose did not recognize that as "style". Thankfully I have this blog where everything will now be made explicit.

The CSS property and value display: none can be used to make an HTML element completely unavailable to the page. In other words, not there at all. So instead of being completely perplexed at the notion of "adding" the <br> tag to the header, I now have two headers. One that is displayed on one line and another that is displayed on two.

Notice that I've added a class to each <span>. The top header I'd like to display when the browser is above 500 pixels wide. The bottom header I'd like to display when the browser is at or below 500 pixels wide. The bottom one has the <br> tag to split it across two lines.

In the CSS file I apply display: none to the classes I defined in the HTML. Along with media queries this will hide one or the other headers based on a specified browser width.

When the browser width is 501 pixels or above min-width: 501px, the two line header with the class .below-500 will not be displayed. When the browser width is 500 pixels or below max-width: 500px, the one line header with class .above-500 will not be displayed.

Also, when the browser is 500 pixels or below I added some other CSS changes to accommodate the header being spread over two lines.

On my iPhone the header used to look like this.

Old Header

And now it looks like this.

New Header

Yay, for me!