Adobe Community: Certain Pages Aligning to Left on Mobile Devices

Currently Being Moderated

1. Marian Driscoll,

May 17, 2012 5:54 AM in reply to Lukewind

Report

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

|

Mark as:

Currently Being Moderated

2. Lukewind,

May 17, 2012 5:55 AM in reply to Marian Driscoll

Report

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.

|

Mark as:

Currently Being Moderated

3. Marian Driscoll,

May 17, 2012 6:21 AM in reply to Lukewind

Report

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.

|

Mark as:

Currently Being Moderated

4. Lukewind,

May 17, 2012 6:39 AM in reply to Marian Driscoll

Report

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.

|

Mark as:

Currently Being Moderated

5. Hype2,

Jun 4, 2012 8:58 PM in reply to Lukewind

Report

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!

|

Mark as:

Currently Being Moderated

6. tonisd,

Jun 6, 2012 3:30 PM in reply to Lukewind

Report

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!

|

Mark as:

Currently Being Moderated

7. Hype2,

Jun 13, 2012 12:31 AM in reply to tonisd

Report

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!

|

Mark as:

Currently Being Moderated

8. tonisd,

Jun 13, 2012 7:29 AM in reply to Hype2

Report

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.

|

Mark as:

Currently Being Moderated

9. buccigraphic,

Jun 17, 2012 8:05 AM in reply to Lukewind

Report

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

|

Mark as:

Currently Being Moderated

10. Zak Williamson (Adobe),

Jun 17, 2012 3:01 PM in reply to buccigraphic

Report

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.

|

Mark as:

Currently Being Moderated

11. buccigraphic,

Jun 17, 2012 3:27 PM in reply to Zak Williamson (Adobe)

Report

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.

|

Mark as:

Currently Being Moderated

12. Hype2,

Jun 25, 2012 10:35 PM in reply to Lukewind

Report

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?

|

Mark as:

Currently Being Moderated

13. Busta_B,

Mar 23, 2013 2:10 AM in reply to Lukewind

Report

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!!

|

Mark as:

Adobe Muse Bugs

Certain Pages Aligning to Left on Mobile Devices

May 17, 2012 5:41 AM

More Like This

Bookmarked By (0)

Answers + Points = Status