5 Replies Latest reply: Dec 12, 2013 8:16 AM by Ben Stanbury RSS

    iPad alignment issues - any more suggestions in late 2013?

    Ben Stanbury Community Member
    Ben Stanbury Dec 10, 2013 9:30 AM

      Hi,

       

      I realise that this question has been asked before, but many of the replies are from over a year ago, so I am wondering if anyone can shed anymore light on it?

       

      I have a site I designed in Muse that displays justified left on an ipad and iphone, rather then centered.

       

      I have gone through the pages and there seems to be no objects that are sitting to the right of the page which would cause the problem.

       

      I tried adding 'overflow:hidden' in the css file, and while this fixed the issue on the ipad, it stopped the full browser width images and footer diaplying at full width.

       

      Any more ideas on how to fix this?  Is it possible to add 'overflow;hidden' to the css file AND keep the footer and full browser with images displaying at full width?

       

      The site in question is http://www.wearebrightlight.com

       

      Many thanks for your help.

       

      Regards,

       

      Ben

        • 1. Re: iPad alignment issues - any more suggestions in late 2013?
          Zak Williamson (Adobe) Employee Hosts
          Zak Williamson (Adobe) Dec 10, 2013 11:18 AM (in response to Ben Stanbury)

          Is this URL correct? It appears to point to a Muse generated site.

           

          The most common causes of tablet and/or phone display of a page appearing left aligned (zoomed out to far) when first loaded are:

          1) Content off the right of the page (since mobile browsers zoom out to fit the content width in the device with); and

          2) Not directly hosting the Muse generated content, but rather hosting it in a frameset or iframe (which can interfere with the mobile redirect and/or the browser's zooming out, due to being unable to correctly calculate the content width).

          • 2. Re: iPad alignment issues - any more suggestions in late 2013?
            Ben Stanbury Community Member
            Ben Stanbury Dec 11, 2013 1:23 AM (in response to Zak Williamson (Adobe))

            Hi Zak,

             

            Thank you for your reply.

             

            Yes this is a Muse Generated site.

             

            I'm not hosting the site with Adobe BC, rather I'm using my own hosting provider. Is this what you mean? I'm not familier with the term iframe I'm afraid.

             

            Many thanks,

             

            Ben

            • 4. Re: iPad alignment issues - any more suggestions in late 2013?
              Zak Williamson (Adobe) Employee Hosts
              Zak Williamson (Adobe) Dec 11, 2013 9:21 AM (in response to Ben Stanbury)

              Lol, sorry about that. It seems we exchanged typos. Yours in the original URL and mine in neglecting to type "not" a Muse generate site.

               

              Now that I'm looking at the correct (very nice) site, a couple notes.

               

              First, when scroll effects are used, the pinch to zoom functionality on mobile devices is disabled. Due to idiosyncrasies of mobile browsers we have yet to find a way to have scroll effects work correctly/reliably across mobile browsers when combined with pinch zooming. (If you find sites with scroll effects that have pinch zooming enable, please point them out to us. Perhaps we'll be able to determine a way to enabling pinch zooming with scroll effects in the future.)

               

              Second, when a site is loaded into a mobile browser the browser will zoom the view such that the left edge of the page is at the left edge of the device and the right edge of the content (which is the page width if everything is within the page width) is at the right edge of the device.

               

              From the appearance of your site in a mobile browser I expect the content in the Work section of the page is flush with the left edge of the page and that somewhere on the page there's content that extends to roughly ruler location 1333, since the browser appears to be zooming out so roughly 1333 pixels are scaled down to fit in the width of the device.

               

              If this doesn't appear to match what things looks like in Design view, a screenshot of the Work section in design view with guides displayed and everything unlocked, visible and selected may help us better understand the layout.

               

              If this does match the current appearance, then moving everything to the right on the page would provide a left "margin" and verifying no content is outside the right of the page will cause the area between zero and the right page edge to scale to fill mobile browsers.

              • 5. Re: iPad alignment issues - any more suggestions in late 2013?
                Ben Stanbury Community Member
                Ben Stanbury Dec 12, 2013 8:16 AM (in response to Zak Williamson (Adobe))

                Hi Zak

                 

                Thank you so much for your further feedback. You were right, in the Work section there is a white mask that lets the images fade in. This was set to full browser width which was pushing the content to the left of the screen for some reason. I reduced this to page width, and also nudged the images slightly inward away from the page edges on both sides.

                 

                The result is a centred site on the ipad which a small white margin on the left and right of the page so none of the content is flush which was the exact solution I was looking for.

                 

                Thanks again, you've saved me a lot of work and finally solved my headache.

                 

                Kind regards,

                 

                Ben