Quick Fixes with Media Queries
by Jim Heiney, Web/Exchange Administrator at Lock Haven University
on January 20, 2016
Most sites have it — that one strange screen width that sends your content shooting off the side of the display and into the next office. Or the font that doesn’t resize properly and pushes content down the page. It can happen to anyone. It can be due to a redesign, a new element on your page, or simply adding a few more characters to a text box. It's usually something you don't see… maybe that weird area between 763 and 746 pixels wide. Of course, that's going to be the resolution that your president's or provost's phone runs at. At that point, it's perilous to embrace the "that's too low of a percentage of our users to make a change for" or the more draconian "suck it up, buttercup" philosophy, which means it's time to put the power of media queries to work for you.
I don't highly recommend futzing around with your existing CSS in OU Campus™. So if you don't have it already, add a custom.css file to your _resources/css folder. (Our site came with custom.css included, but I've snuck around some of your sites and didn't see it there, so hence the instructions.) To actually use that file, you will have to reference it in your list of CSS files that your OU Campus installation uses. That file is an “include” and should be in your _resources/includes/. Usually it's cryptically named “css.inc.” Just toss in a reference to your new custom.css. It should look something like this when you're done:
<link rel="stylesheet" href="/_resources/css/custom.css">
Remember that the last referenced CSS wins, so put your custom file at the bottom so the settings don't get overridden.
Next, figure out at what range of widths your error occurs. You can do this with either a pixel ruler (how sad is it that's a thing?) or most web browsers have an extension (like web developer) that will display the screen width. Then resize your browser until you hit the wonky area.
Now for the code that will go in the custom.css file. The quick and dirty reference here is that in a media query, max-width means "no wider than" and min-width means "this size or wider." Let's say your issue is that the font is too large in a text box between 470 and 480 pixels and shoves content down the page. Then you could do something like the following and make it so the font stops bullying other elements:
@media screen and (max-width: 480px) and (min-width: 470px)
It's pretty basic stuff, but hopefully it will help some of you out when admissions is breathing down your neck about the way your site looks on their director’s tablet.
About the Blogger
Jim Heiney is the web/exchange administrator for Lock Haven University (LHU). He’s been at LHU for more than 15 years and is still amazed at how much more there is to learn (and he willingly accepts that fact) for those who work with technology. His philosophy of “never stop learning” has led him from English teacher to IT guy with a few other odd stops along the way. When not at work, he can usually be found at home with his family. In his spare time, he can be found writing, drawing, or playing the occasional computer game.