1 Reply Latest reply: Mar 2, 2013 10:14 AM by Vinayak_Gupta RSS

    Mobile/Phone Layout Preview Issue

    CWLMedia Community Member
    CWLMedia Mar 1, 2013 8:45 PM

      Hi all,

       

      I've just made my first attempt at a basic layout on a master page for the mobile version of a site I'm working on, but when I go to Preview mode things just aren't displaying properly...

       

      I have a tiled background image, a header with a logo and an image where my menu button will likely go, and in the footer I have social media icons and a copyright notice (though this will likely change). The page is blank but has rounded corners and a gradient fill. That's it so far. Sounds simple, right? Everything's centrally aligned and all lined up to what SHOULD be the left and right hand sides of the browser window, yet when I go to Preview mode, EVERYTHING seems to shift to the left for some reason? And I assume that since I can't see the footer content in Preview mode, that the user would have to scroll to see this? Which, in itself is odd since I haven't stretched the standard page height...?

       

      The attached images should help convey what I mean.


      Design Mode (content blurred out):

      mobile design mode.png


      Preview Mode (portrait):
      mobile preview portrait.png

       

      Preview Mode (landscape):
      mobile preview landscape.png

       

       

      Can anyone advise on anything I'm doing wrong, or whether or not this is a bug? I tried this in v3.1 prior to the latest update (I'd stayed on 3.1 for a while!), and it did this, so I decided to update to v4 just in case it was a bug in 3.1, but the same thing is occurring. Anyone have any suggestions or ideas?

       

      Ideally I want to have the finished desktop version, and both a smartphone and tablet version of this site go live at the same time, in 3 days' time, so any swift help would be greatly appreciated.

       

      Thanks.

        • 1. Re: Mobile/Phone Layout Preview Issue
          Vinayak_Gupta Employee Hosts
          Vinayak_Gupta Mar 2, 2013 10:14 AM (in response to CWLMedia)

          By looking at the guides in the first screenshot, it appears that in order to reveal the Browser Fill area on a phone layout, you have dragged the Top of Page guide down by a few pixels and brought the Header guide to overlap it. Similarly, you have dragged the Bottom of Browser guide down a little lower to reveal the Browser Fill area at the bottom and overlapped the Footer guide with the Bottom of Page guide (or the other way around). Doing so doesn't increase the Min height for the page but makes the overall height of the content area large enough to cause the bottom area to hide when using the smaller iPhone 4 Preview (like in your case). If you switch to iPhone 5 Preview and other larger devices, you might be able to preview the cropped area.

           

          However, please note that the Preview mode for Phone and Tablet layouts do not emulate actual device behaviours and in order to test them, it is recommended to publish the mobile pages to a webhost and test on actual mobile devices.

           

          Thanks,

          Vinayak