SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Location
    Hillsborough NH
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Issue with ipad layout being forced left

    So we just re-launched a new site today and on the IPAD vertical and horizontal I have a gap of whitespace on the right hand side of the site.....wondering if anyone has any CSS suggestions as to how I can correct this so it centers properly on the ipad....

    http://www.yankeemagazine.com/

    Any help much apprecitated.

    Thanks,

    Matt
    Matt Nelson
    Nelson Design Studios
    www.nelsondesignstudios.com

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You have to be pretty careful with responsive sites, building them up and testing them as you go. On small screen sizes, you still have the #content div width set at 1000px in width:

    Code:
    .col-full, #wrapper {
    width: 1000px;
    max-width: 1000px;
    }
    Other things break at a narrow width, too, so make sure to test your media rles in a normal desktop browser as well. (Narrow the window in Chrome and you'll see several major problems.)

    When using @media queries, it's also a good idea to att this to the <head> of each HTML file:

    Code:
    <meta name="viewport" content="width=device-width">


Tags for this Thread

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
  •