Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

You can see here a (very) simplified version of my website: http://ple100.free.fr/foo
And on iPhone, it looks like this: http://ple100.free.fr/foo/iphone.png

As you can see, we don't see the right border of the page. And we have a black border on the left... I'd like it to be like this: http://ple100.free.fr/foo/iphone2.png
Do you know how to solve this problem?

Here is the CSS: http://ple100.free.fr/foo/style.css

share|improve this question
add comment

migrated from stackoverflow.com May 10 '11 at 20:05

This question came from our site for professional and enthusiast programmers.

3 Answers

See The CSS Box Model

A width of "350px" likely is not doing what is expected.

Happy coding.

share|improve this answer
add comment

This first bit of code is a PHP browser sniffing snippet, the actual CSS we’ll use is not brought through via any server side code, we’ll use some CSS media queries for that. What we’ll use this code for is serving the markup with an iPhone specific meta tag and to shorten the current page’s title. max-device-width You want to use 480 pixels for the iPhone and 980 pixels for the iPod Touch.

 <?php
    $browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    if ($browser == true)
    {
        $browser = 'iphone';
    }
?> 

What the above code does is sees if the user agent contains any instance of ‘iPhone’ using the strpos PHP function.

Or you could use this:

    <link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />

Now, as all layouts differ I am going to assume a similar one to mine, a simple two column set up with a logo and menu in the header. If your layout is different I am sure you can quite easily retrofit it. As I mentioned before, remove all stylistic floats and set all widths to 100%. If you are using divs sensibly (i.e. for large bodies of content and not for nav items) this code should see you right for linearising the content:

@media screen and (max-device-width: 480px)
{
    body{...}
    div
    {
      clear:both!important;
      display:block!important;
      width:100%!important;
      float:none!important;
      margin:0!important;
      padding:0!important;
    }
}
share|improve this answer
    
@micropsari, if this answer as helpful, upvote it and/or accept it –  Brian McCarthy May 13 '11 at 18:58
add comment

One solution would be to change:

<meta name="viewport" content="width=device-width, user-scalable=yes" /> 

To:

<meta name="viewport" content="width=350" />

You could also change the #site width to a percentage instead of a pixel count.

Otherwise you will want to go with a conditional css, or change your css to fit better.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.