Copy link to clipboard
Copied
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
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.
Copy link to clipboard
Copied
I'm not seeing any meta tags or CSS for mobile Safari. Those elements need to be manually added after each Muse HTML export.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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!
Copy link to clipboard
Copied
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!
Copy link to clipboard
Copied
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!
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Thankyou Tonisd, I tried your suggestion and it worked 🙂
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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!!!
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
And hey: Remember to check master pages for stuff touching the blue line.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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!!
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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!!
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.