Can't Imagine How

The title pretty much says it all. I have my site looking pretty close to how I want it, at least for this phase of development. But only at the default screen size of my laptop. As soon as I resize the window, it starts getting weird. It's not that I expect to get a lot of customers using small devices. OK, the original point of making a website was so when I'm out painting, I can have a QR code taped to my easel that will link to my site. So, I am expecting to get some visitors with mobile devices. But mostly, I want my site be responsive because it's embarrassing to have it not be. I'm still afraid to text anyone a link to my site, because it's too unpredictable on a small screen. Also, while normal web users aren't constantly resizing their browser windows, developers are doing exactly that. So, if I want other developers to be impressed with my skills (and I really do), then giving it a smooth transition on resize is an essential requirement. But, it...

So, a couple things don't work and/or look bad on small screens. Despite the fact that I finally stopped setting styles using pixels. Which is a remarkably bad practice, but still for some reason a tough habit for me to break. Anyway, here are some persistent bugs with the mobile version of my site: The menu , which now collapses to a toggle button below Bootstrap's medium screen size (which I believe is 768px). However, when you click the hamburger icon (aka the 3 horizontal bars that are the universal symbol for an expandable menu), the menu items are ugly, and also they push the rest of the content down the page. Should instead become a dropdown menu that floats above the page content. So, here's the homepage on my laptop screen: And here it is on mobile (Galaxy S8) - with menu expanded: The Lightbox feature . This used to handled by a complex function in App.js, which got passed as a property to every page so that any image could by magnified. Howeve...