Question

I have develop a website with dimensions base on monitors.
When I saw it on an Ipad the rigth corner is missing the css colors.
Take a look

Here is the HTML code.

 <div id="nav-top">
        <div class="wrapper">
            <!-- Top Navigation Menu -->
            <ul class="menu-nav-top">
                <li>About</li>
                <li>Contact</li>
            </ul>
            <!-- Top Social Links -->
            <ul class="social-links">
                <li>contact</li>
                <li>Twitter</li>
                <li>Facebook</li>
            </ul>
        </div><!--#wrapper-->
    </div><!--#nav-top-->

    #nav-top {
        background: url("img/bg_body_blue6.png") repeat-x scroll 0 0 transparent;
        height: 36px;
        position: relative;
        z-index: 4;
    }

    .wrapper {
        margin: 0 auto;
        position: relative;
        width: 1146px;
    }

After looking at the source code, I found that since the width of the wrapper is bigger than the safe zone of the ipad (920px),
the ipad only applay the css to the viewable area and the rest wich you need to scroll to see dosn’t have the style.

Is there a way I can fix this (get the css on the non viewable area or the area you need to scroll to see)

Thanks

Answer 1

If the problem was that the your site was the wrong size you wouldn’t be able to see the stuff being rendered on the right side at all.

What are you doing w/ the ULs? is one float left and the other float right? If that is the case then most likely it’s because you’re setting the width on the “wrapper” and not on the “nav-top”.

if you change it to something like

#nav-top {
  background: ...;
  height: 36px;
  width: 100%;
  max-width: 1146px;
}


.wrapper {
  display: block;
  width: 100%;
  max-width: 1146px;
}

it should work okay. Also clearing the floats on the UL’s should fix this problem as well. So adding this to your already existing code

 .wrapper:after {
   content: ' ';
   display: inline-block;
   height: 0px;
   visibility: hidden;
   clear: both;
 }

you should be fine as well.

I agree with Andy though, you shouldn’t use fixed widths (unless they are design dependent) because it never translates well when going mobile.

hope that helps.