Certain Pages Aligning to Left on Mobile Devices

[Lukewind]

I have a Muse site that I am almost finsihed with and there is a weird problem that I cannot for the life of me figure out. 

All of my pages look perfectly fine in regular browsers, the page content is all centered and looks fine, but when I look at certain pages (not all of them) on my iphone the entire page gets shifted to the left and does not fill up the screen like all the other pages. Everything is still centered but smaller and pushed to the left.  I have tried a lot of fixes but nothing works so I need a fresh set of eyes to help me figure out this issue.

Here are two screenshots showing the difference.  The first one is how its supposed to look and the second one is how the messed up page looks.  

You can also visit the website here....   http://pgl0.businesscatalyst.com

--------

You can also visit the website here....   http://pgl0.businesscatalyst.com

[Guest]

I'm not seeing any meta tags or CSS for mobile Safari. Those elements need to be manually added after each Muse HTML export.

[Lukewind]

Where do I get that code. I am not a coder so I wouldnt know that, plus why are all the other pages fine if its just a code issue, none of the other pages would have that code but they work fine.

[Guest]

Check your desktop browser. Some of your pages are wider than others. A horizontal scroll bar appears at the bottom of the browser on those troublesome pages.

You just need to clean up whatever wide element you have on those pages.

[Lukewind · Accepted solution]

Thanks, no content was wide on the page but I found an empty text box way over to the right that was causing the issue.

[Hype2]

Hello All-

I am having the same problem with my web page using Safari on iOS.  As per the suggestions, I have checked, doubled checked, and triple checked for any hidden or empty text boxess throughout the site, but can't find any.  Also, I checked the width of all my pages and they are consistent.  Am I missing something?  The site in question is www.pricecountyfair.com.  Thanks!

[tonisd]

I was having the same problem when I viewed my site on the iPhone or iPad.

I inserted "overflow:hidden;" in the .css file under #page, for each page of the site and that worked great:

#page

{

          z-index: 1;

          width: 960px;

          min-height: 600px;

          overflow:hidden;

          background-image: none;

          border-style: none;

          border-color: transparent;

          background-color: #EBEBEB;

          margin-left: auto;

          margin-right: auto;

}

I hope that Adobe will give an option for overflow in the page properties in the next version of Muse so I won't have to do this every time I

make a change in the file, or have overflow:hidden as a default!

[Hype2]

Hello tonisd,

I finally had the chance to try your suggestion, and it worked...sort of.  My site is now centered in the Safari iOS app, however the edges on both sides are being chopped off.  I have the ribbon menu at the top where the graphics overhang the main body, and both of those are not visible.  You can see what I mean by going to my site (www.pricecountyfair.com) on your computer and then on iOS.  Is there any way to make it centered AND have it not chop off both edges?  Any help would be greatly appreciated.  Thanks!

[tonisd]

Your site looks great! I don't see a difference in the site on my computer and what I see on my iphone, but I'm assuming that you have more ribbon at the top on each side where the ends are being cut off. The overflow:hidden line will make whatever is outside the page boarders invisible. So you may want to scale the left and right sides of the ribbon in, so that everything will be inside the site page width.  I know this will mean a little redesigning of your site but I'm guessing just one change on the master page and that should work.

[Ben Stanbury]

Thankyou Tonisd, I tried your suggestion and it worked 🙂

[mariannehales]

Tonsid - can I do this by "insrt HTML"?  Or can you explain how to insert into a specific placement in the code, or how do I access the css??

Thank you

[buccigraphic]

this is driving me buts

not only is the site forced to the left on an ipad, but even in safari and firefox the page isn't centering and the bottom scrollbar is appearing, even though there is nothing i can find to the right of any of the pages, including the master.

any ideas not suggested previously?

http://socialstarpower01.businesscatalyst.com/index.html

[Zak_Williamson__Adobe_]

The Facebook HTML embed for the "Recommend" button on the top left of the page is 450px wide, thus it's sticking far beyond the right of the page and causing the scroll bar to appear.

<iframe src="//www.facebook.com/plugins/like.php?href=hyyp%3A%2F%2Fwww.socialstarpower.com&send=false&layout=button_count&width=450&show_faces=false&action=recommend&colorscheme=light&font=trebuchet+ms&height=21&appId=201948789875598" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowtransparency="true"></iframe>

[buccigraphic]

Oddly enough I was about to mention that after digging through the HTML of the master page.

The item as been removed and all is fine.

It's odd that an item that small should show up as so wide in the HTML.  In fact at https://developers.facebook.com/docs/reference/plugins/like/ the default width for the item is 450 pixels. Physically, it's no more than 140 pixels wide.

Thanks for taking the time to look.

[5tudio]

Hi,

I'm having the same issue as these guys.

When the page is opened in chrome/safari/ipad/iphone its aligned to the left. I need this fixed for my client.

I have no knowledge of HTML but deperately need a fix please.

Help!!!

[hughiegavin]

Did you ever find an answer to this? As I am having the exact same problem. I checked to see if there were any outlying text boxes etc, and I also deleted all the scrolling effects, thinking that they might be causing the problem. Neither fixed the problem

www.lrproductions.biz

Works fine on most browsers, but the phone layout is pinched to the left? I would really appreciate any help.

[clemse]

I corrected my problem with weird left aligning on mobil devices this way:

Don't have any stuff touching the right page edge (the far right blue vertical line). I had an invicible box causing the problem one one page. And my Google tag on other pages. (The Google code is a checked box with a little warning sign in it. It's a piece of html) Don't let that box touch the page edge line.

Voila - it worked.

Chris

[clemse]

And hey: Remember to check master pages for stuff touching the blue line.

[mdurbanek]

I discovered that my full screen button was clicked on my image screen. Once I unchecked it, the screen centered with my specified even border.

[Hype2]

Well, after seeing what the overflow:hidden line did to the objects I have hanging "outside" of the page border, I have decided to remove the command. 

The whole intent of my design was to have images be able to "hang" outside the main frame and give the site a little bit of a better look that's not so boxed in so to speak. 

Is there any other way to do this? 

[Busta_B]

Hi, I'm having the same issue as well. I'm going crazy trying to figure it out! There's one page that works perfectly but I'm having a hard time mimicing it. Can someone please help?! I tried the "overflow:hidden" but it removes content I want on there.

www.cyclepathmagazine.com

Thank you!!

[jeg1989]

I created a mobile site for my muse desktop site www.fam-festival.com. However my mobile site does not spread across the entire mobile browser and stays to the top left, how can I fix this?

[sadie336]

i am having the same issue and it's driving me insane. it displays just fine on my desktop, but on the iphone/ipad it's left aligning and cutting off content. www.wearecalledteam.com

if anyone has the solution i would be eternally greatful!!

[willatwood]

I am also having this centering issue.  I have checked for any objects on the sides, and there are none.  Site does not center on my iPhone, but works fine on pc browser.  Please let me know how to fix this.

[hughiegavin]

Did you ever get an answer to this? As I am having the exact same problem. I checked to see if there were any outlying text boxes etc, and I also deleted all the scrolling effects, thinking that they might be causing the problem. Neither fixed the problem

www.lrproductions.biz

Works fine on most browsers, but the phone layout is pinched to the left? I would really appreciate any help.