The Rock Band Customs Project website as it can currently be seen on a desktop, using a monitor of AT LEAST 1200px wide.
This led to compatibility issues. I tried accessing the site via a smartphone, and it was horrible in landscape mode. All the boxes, images, and everything was squished, and font is barely readable due to staying a static size that doesn't scale up for smartphone screens.
So, this year, I thought I'd work on that issue a little more. I knew I could use CSS to make the sidebar hide away, but I had trouble doing so. I tried using a toggle button with a sandwich menu icon, but that hardly worked with the sidebar, which is an HTML document displayed via iFrame - the guide I followed
built a menu from scratch within the current HTML document, which I didn't want because that would mean I would have to inject and update the sidebar on EVERY WEBPAGE, which I was doing at first when I created the site, but I hated it and switched to a separate HTML doc.
Ironically, the solution was right in front of me: by using transition properties and the :hover
tag, I was finally able to make a hideaway sidebar:
The hidden sidebar, seen on mobile screens and any display smaller than 1100px wide - hidden (left) and revealed on cursor hover or finger/stylus tap (right).
Now, the feature is still new, and I haven't ironed out all the kinks yet - fonts still appear small on some devices, for instance - but at least I tackled one glaring problem already! I'll try to fix the others soon enough, but for now, I already like where this is going!