BugMaster recently fixed the code so its blog looks good on mobile. I recommend you check that post out

Hi levans,

The pleasure is all mine.

Since we're limited to what we can do with blog CSS, my solution isn't perfect, but it's good enough.

I'll let you in on one secret: At narrow screen widths the sidebar content isn't really hidden. But it's lower on the page than all of the posts. With infinite scroll, it keeps moving further and further down. You'd end up seeing it again if you scroll all the way to the last post in the blog.

The next part of the CSS relies on ensuring that #main has a background color of white and that it is above the gray background of whatever the surrounding div is -- I forget if that's #content or #wrapper or something else. But #main needs to be able to cover it up at all widths.

Finally -- and this is the important part -- I used calc to change the width of #main dynamically since we can't use media queries.

Putting it all together, I have:

#main {
  min-width: calc(100% - 260px);
  width: calc((786px - 100%) * 1000);
  max-width: 100%;
  background-color: white;
  border: none;
  z-index: 5;
}

I tried using calc to give the sidebar content a width of 0 when the screen is narrow, but it wouldn't go away entirely. It could be that this content is getting a non-zero min-width further down the cascade? I dunno. But at that point I had decided that things were good enough for now and that I can try again in the future.

I wound up doing this:

@media (max-width: 767px) {
  #content {
    background-color: white;
  }
  #main {
    width: calc(100% - 40px);
    margin: auto 20px;
  }
  #side {
    display: none;
  }
}

Oh, cool.

I couldn't get media queries to work, so I assumed that they did not work. Looks like that was an error on my part!

Next step: steal levans's CSS to improve the BugMaster Blog!

Actually it's not a boring blog Levans...