Mobile friendly is NOT mobile friendly. Tips, suggestions...?

I have a clean, nice-looking (in my opinion) site set up at https://www.alsip.net. It's a very simple book/author page.

However, when viewed on a mobile device, it is an absolute, complete, total, embarrassing disaster. As in, I've seen much better handling of mobile presentations on platforms such as Wordpress, and if I can't find a fix for this, I'm going to have to switch platforms.

I've carefully read the literature provided by Squarespace on mobile optimization. I can't find anything else to do with my simple setup that would prevent what's happening from happening (screen shots attached). I mean, they can't even seem to get the default method of stacking to work (e.g. the two buttons that are lined up in the regular browser but misaligned in the mobile presentation).

More disturbing is that whatever mobile detection is going on here (if there is any), correctly understands what to do with the background image of the page, but is presenting the "#1 Amazon best seller" image as full size, when even a beginning site designer would know to simply scale the image size.

I'm an IT pro and I *could* write browser detection code and do this much better.  But I just don't have time, and that's the reason I went with Squarespace to begin with. I just wanted to put together something clean and simple.

Any suggestions on how to improve upon this would be appreciated.  TIA