Layout Does Not Appear Responsive On Small Viewports

[jeffnyman]

Just looking at the Lanyon example itself, if you shrink your viewport down and use the sidebar widget, the text is pushed off the screen.

I would presume the idea is either to not show the sidebar widget in such cases or to just have it overlay the text maybe?

Are there ways to handle this?

I'm thinking you can do this to try and handle when the viewport size gets too small:

@media (max-width: 45em) {
  .sidebar-toggle {
    display: none;
  }
}

I just picked 45em by eyeballing when the primary content seems to start running up into the hamburger toggle.

Guessing maybe the other part of this would be handled by automatically adding the .sidebar-overlay class when the size of the viewport is too small. I'm not entirely sure how to do that as it seems it would be JavaScript that executes only on a certain media query being viable (i.e., a max-width like I have above).

It feels like this might be workable:

(function (document) {
  var x = window.matchMedia("(max-width: 45em)");

  x.onchange = (e) => {
    if (e.matches) {
      document.body.classList.add("sidebar-overlay");
    } else {
      document.body.classList.remove("sidebar-overlay");
    }
  };
})(document);

So I might have answered my own question on reporting this issue. That said I'm curious if I'm missing some setting since it seems like a responsive layout would have to include this by default. Since this isn't in Lanyon, I'm presuming that perhaps there are better ways to do this.