Website looks awful on macbook, iphone

CynthiaM

My website used to look great no matter what device I viewed it on. But now it looks awful both on iphone and a 13 inch macbook. Can someone help me figure out why and more importantly how to fix it. It looks ok in Safari on the macbook but awful in Google Chrome and looks bad in both browsers on the iphone.

Here's the site:
https://www.cynthiamerzerphotography.com/

Hikin' Mike

I don't own a iPhone nor a macbook, so I have to use this: http://quirktools.com/screenfly/#u=https://www.cynthiamerzerphotography.com/&w=375&h=667&a=37&s=1

Looks fine to me, so can you post a screen shot that shows how awful it looks?

CynthiaM

First image is what I see on chrome. Second image is what I see on safari and this is how it should look. no top header, menu on left.

But from what I hear from friends, its not just chrome. One friend tell me that it comes up wrong on both her ipad and iphone and she only uses Safari on those devices.

Hikin' Mike

It isn't a browser issue, it's the screen size. The first one is showing the mobile version and the second one is the desktop.

CynthiaM

Any suggestions for how to fix this? My laptop used to show the second/correct version. And it looked good on any device that I viewed it on; desktop, laptop, iphone, ipad.

colourbox

If, on the laptop, it looks OK on Safari but not in Chrome, then somehow, Chrome is using the wrong UserAgent. Because Safari is showing the desktop version, and Chrome is showing the phone version. Chrome should not be doing this unless maybe Chrome is using an ad blocker or other plug-in that alters the code in the website.

You said it looks wrong on the phone, but it actually does not. It seems to be using the phone version on the phone. The only problem is that the website might not be designed to look good on a phone. Current web design practice is that for phones and other very small devices, a big, expansive website needs to gracefully degrade to a single-column version that fits on a phone screen without need for scrolling or zooming.

Since web traffic has been leaning more and more toward mobile devices as the majority, more web designers are designing mobile first. You make your site look good on a phone first, then you build it out for the desktop.

The Smugmug website templates switch between phone and desktop layouts automatically. This is also standard practice at practically every other website builder out there, from Wordpress to Squarespace and any other that is reputable. Because the ability to switch between mobile and computer layouts is autotmatic, all you have to do is make sure your website looks good both ways.

More info:
https://medium.com/@Vincentxia77/what-is-mobile-first-design-why-its-important-how-to-make-it-7d3cf2e29d00

Chasing Daylight

The 'collapsed menu' on mobile can be turned off to show the entire menu on mobile. Although it will be a responsive mobile display, versus showing the menu on the side as done on the desktop. To turn off the 'collapsed menu', go to customize > content/design > upper right select entire site or homepage (whichever your menu content block is on) > hover mouse over the menu content block > wrench > scroll down on the options and turn OFF for collapse mobile.