SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Guru XraySierra's Avatar
    Join Date
    Jan 2002
    Location
    Ontario, Canada
    Posts
    850
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Site Getting Cutoff on Mobile/Tablets

    I site I just completed (http://sudburypando.com) looks just fine in my browser. However, when I go on my iPhone or iPad, the right side is cutoff. I've been trying to fix this bug for hours without success. Does anyone know what I'm overlooking?
    Chris Blackwell - my blog and ramblings
    Comicville - Daily News and Comic Reviews

    "web development is what I love...so that's what I do"


  2. #2
    SitePoint Zealot
    Join Date
    Jul 2012
    Location
    Scarborough, North Yorkshire, United Kingdom
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have a min-width on your body of 1180px. Even if that wasn't set it would struggle to resize with the wide header image, it won't just shrink with the device. It may be worth looking at Media Queries to style things differently depending on layout- http://www.netmagazine.com/tutorials...queries-part-4

    Nice looking site though.
    Richard
    Resell SSL Certificates - API / WHMCS / HostBill / ClientExec
    ServerTastic - RapidSSL, Geotrust, Thawte, Symantec, SmarterTools and more

  3. #3
    SitePoint Guru XraySierra's Avatar
    Join Date
    Jan 2002
    Location
    Ontario, Canada
    Posts
    850
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RichardAskew View Post
    You have a min-width on your body of 1180px. Even if that wasn't set it would struggle to resize with the wide header image, it won't just shrink with the device. It may be worth looking at Media Queries to style things differently depending on layout- http://www.netmagazine.com/tutorials...queries-part-4

    Nice looking site though.
    I added the min-width properly after to try to fix the problem. Didn't work though :-(
    Chris Blackwell - my blog and ramblings
    Comicville - Daily News and Comic Reviews

    "web development is what I love...so that's what I do"


  4. #4
    SitePoint Zealot
    Join Date
    Jul 2012
    Location
    Scarborough, North Yorkshire, United Kingdom
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by XraySierra View Post
    I added the min-width properly after to try to fix the problem. Didn't work though :-(
    Its these fixed widths that are the problem. The whole site is fixed to this width and so it won't scale with with the browser window, ideally you want to use percentages

    If the width on this rule is changed to 77% and the min-width is removed the sections under the banner float nicely:

    .homepage {
    margin: 0 auto;
    width: 1180px; [Change to 77%]
    }

    html, body {
    height: 100%;
    min-width: 1180px; [Remove]
    }

    Please back up before you do anything
    Richard
    Resell SSL Certificates - API / WHMCS / HostBill / ClientExec
    ServerTastic - RapidSSL, Geotrust, Thawte, Symantec, SmarterTools and more

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,206
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Put this in the head of your pages:

    Code:
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    It forces mobile devices to fit your page into the viewport.

  6. #6
    SitePoint Guru XraySierra's Avatar
    Join Date
    Jan 2002
    Location
    Ontario, Canada
    Posts
    850
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Put this in the head of your pages:

    Code:
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    It forces mobile devices to fit your page into the viewport.
    Tried that too. All that did was make things worse.

    I can't fix change the width to 77%, because that will only work with the design at a specific resolution. I want it to be 1180px wide.
    Chris Blackwell - my blog and ramblings
    Comicville - Daily News and Comic Reviews

    "web development is what I love...so that's what I do"



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
  •