The Butt Ugly Weblog

Safari & ChatGPT woes

Okay, since my CSS knowledge is a little bit outdated, I resorted to talking to ChatGPT about how to make plain CSS to achieve the three-column layout you see here.

It gave me some real nice code for layouts; both using display:flex and display:grid, but I. Just. Can't. Make. These. Work. On. Safari. On. iPhone. Safari on the Mac, no problem. Chrome on the iPhone, no problem. But for some reason it feels like Safari on iPhone is announcing the screen width to be far larger than it actually is, so all media queries go all wonky. I know all of you CSS heroes out there are laughing right now and shaking your heads saying "yeah we know", or "use a framework you dork", but before I go the framework route (which would be a bigger job) I sort of want to understand why this is so.

Any hints?

Okay, figured out the reason - very aggressive caching by Safari. Grid layout works, but I had to learn how to connect my phone to the local dev environment [which was pleasantly easy] to actually debug the issue. A quick cache purge and yes, turns out that I had after all done everything right on my final attempt... Classic rookie mistake there :-D