page content becomes a narrow column on iPhone

It looks like you’ve made some sort of customization to the header where the site description is a fixed width of 500px and the image has a width of 962px. That’s what is making the rest of the content look smaller, because those items can’t respond to the change in screen widths when it has fixed sizes.

Instead, I would add some CSS for the header image to make the width: 100% and the height: auto, and take the width property off of the rule for the site description (.site-header h2).

Thanks so much, that makes sense to me. I made the changes, but it’s still appearing the same way on my iphone. I checked using Chrome and Safari, looks the same on both. Still looks good on my computer and iPad, just not my phone.

I also tried using a header image in the Admin panel/theme/customize instead, but it throws the image below the title, descrip and navi bar.

Add this CSS to your style.css file:

#masthead img {
   width: 100%;
   height: auto;
}

Yesssss!!! Thank you, I would never have figured that out. I was just about to update my thread: I made my header image smaller (width 500 px) but that didn’t help much. But adding that last style you recommended did the trick. Thank you, you’re a genius!!

You’re welcome. If the image is too large on a desktop, you can also add a max-width property so it doesn’t expand past a certain point.

And thanks again! Yes, it was too big on desktops and that max-width fixed it. Glad you thought of that!