SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Iphone Site Display Problem

    My site is not displaying correctly on iphone5 and 4s.

    The url is: http://www.mya.co.uk/nonsurgicaldev/index.html and I've attached my html and css.

    The content does not fit the screen width when the phone is in portrait view and in both landscape and portrait view there is a large margin on the left hand side and none on the right.

    I have a form on the page and had hidden the original checkboxes like this:

    :root input[type=checkbox] {
    position: absolute;
    left: -6em;
    }

    and I thought it might have something to do with this, but I removed the checkbox replacement css and I still have the problem.

    I have included:

    <meta name="viewport" content="width=320" />
    <script>
    if (screen.width > 740) {
    var mvp = document.getElementById('testViewport');
    mvp.setAttribute('content','width=740');
    }
    </script>

    in my head tags.

    Can anybody help me with this issue please? Would be much appreciated.

  2. #2
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Apologies - I didn't attach the files as they were too large but you can view the source.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't have an iphone to test but the first thing I would try is to remove the absolute positioning from the container as you are using left:20% and right:20% which is not really a viable centering technique especially for small devices.


    Code:
    #container {
    	position: absolute;
        right: 20%;
    	left:20%;
        width: 50%;
    	min-width: 960px;
    	overflow:hidden;
    }
    Do something like:

    Code:
    #container {
    position:relative;
    width: 50%;
    min-width: 960px;
    overflow:hidden;
    margin:auto;
    }
    I don't see that you are doing anything special for your mobile specific styles as you should be re-organising the content to fit on smaller devices to avoid scaling. Otherwise you may as well do nothing at all and let the device scale it anyway (they will assume 980px and scale accordingly).

    Remember also that @media rules follow the cascade and if you say something like this:
    Code:
    @media only screen and (max-width: 480px) {
    	body{background:red}
    }
    body{background:blue}
    Everyone gets a blue background because the last rule over-rides what went before.

    But if you say:

    Code:
    body{background:blue}
    @media only screen and (max-width: 480px) {
    	body{background:red}
    }
    Then only smaller devices get the red background and anything wider than 480px will be blue.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •