As we were desktop-izing the site, we moved the homepage navigation over to the right side of the page to open up a hole on the left side for more content. We'd like to add this content only when the screen is large enough. Not just load it all the time and hide it on mobile. That wouldn't be very mobile-first thinking, would it?

We essentially need to test the windows width, then if it is wide enough, ajax in some content. How to we find out the windows width? We look at a whole bunch of ways. We measure it straight up. We use matchMedia() to test a media query. We end up using a little library called Enquire.js to give us media query callback functions.


  1. mpgilbertusa
    Permalink to comment#

    It’s nice that Digby keeps you company while you record your screencasts (I’m assuming that’s her dog tags jingling in the background). My dog used to sleep under my desk while I worked. Great work companions.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.