Site not centered on ipad

mjpi

When I go to my site on the ipad/safari the initial page loads are off center. When I pinch it recenters and looks fine. But every new page I have to do that.

Support says this is a "bug and has no ETA to resolve" and I get no indication that they are even going to work on it. They suggest maybe try another template that uses a left bar. I can't be the first one to have this issue and limiting to just left bar designs so it will work on ipad seems like a poor answer to me. Before I invest time into rebuilding in a new design. I would like to see if anyone else has had this problem and found an alternative.

mikepierson.com


Mike

annnna8888

Mike, I didn't want to make changes on your site, but I sent you another email suggesting setting the layout to Stretchy under Entire site, with side margins as you see fit. Currently it's set to Fixed at 1280 pixels.

Ana
SmugMug Support Hero

annnna8888

Mike, I replied to your email but I will provide the answer here too, for Dgrinners' benefit.

I spoke with our engineers. They confirmed only the change of layout to Stretchy under Entire site is needed.

You can add this CSS code to a CSS content block under Entire site. On larger screens and browsers, your site will appear to have a fixed width, but will resize appropriately on smaller screens:

.sm-page-layout-region-body { max-width: 1280px; }

Ana
SmugMug Support Hero

mjpi

Thanks Ana. I got your email and your solution (here and in email) was the exact solution that I needed. Thanks again.

annnna8888

You're very welcome, Mike. Always happy to help.

Ana
SmugMug Support Hero

agallia

annnna8888 wrote: »

Mike, I replied to your email but I will provide the answer here too, for Dgrinners' benefit.

I spoke with our engineers. They confirmed only the change of layout to Stretchy under Entire site is needed.

You can add this CSS code to a CSS content block under Entire site. On larger screens and browsers, your site will appear to have a fixed width, but will resize appropriately on smaller screens:

.sm-page-layout-region-body { max-width: 1280px; }

Ana
SmugMug Support Hero

Does the max width have to be 1280px or does a higher px work too related to ipad, etc?

Bea

Hi Al,

That CSS code is only necessary if you want to limit the width on big screens, otherwise it should not affect the display on iPads, even increasing the max-width in the CSS code.

I hope this helps! Please let us know if you have any further questions.