SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    822
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question iPhone/iPad odd display of site - site cut off

    Can someone review this site and tell me why this site is not fitting full screen width on mobile devices? I posted in the CSS forum because I suspect that my design code is conflicting with a plugin I'm using the detect mobile devices and resize the site automatically.

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Toad

    You need to remove those fixed containers inside your 100% width wrappers, nothing has been styled for smartphone.
    I mention something very similar in another post, read post #2

    http://www.sitepoint.com/forums/show...port&p=5186807

    Let us know if you need further information.

    Barry
    The more you learn.... the more you learn there is more to learn.

  3. #3
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    822
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by computerbarry View Post
    Hi Toad

    You need to remove those fixed containers inside your 100% width wrappers, nothing has been styled for smartphone.
    I mention something very similar in another post, read post #2

    http://www.sitepoint.com/forums/show...port&p=5186807

    Let us know if you need further information.

    Barry
    So, in brief, I need to create a separate stylesheet for some basic fixes then?

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    general speaking yes, or add some media queries inside your main css.
    I find it much easier and more organized to create separate css for smartphone/tablet.

    A quick fix is to just override the main desktop styles, you'll also need to make your images responsive so they adjust and fit your new container dimensions.

    You would end up with something like the below depending on how far you'd like to take this:
    Code HTML4Strict:
    <link rel="stylesheet" media="only screen and (min-width: 480px)" href="480.css">
    <link rel="stylesheet" media="only screen and (min-width: 600px)" href="600.css">
    <link rel="stylesheet" media="only screen and (min-width: 768px)" href="768.css">
    <link rel="stylesheet" media="only screen and (min-width: 992px)" href="992.css">

    Cool links to bookmark:
    http://mediaqueri.es/ - Check out all the sites listed and have a look at their code.
    http://mattkersley.com/responsive/ Priceless!

    The more you learn.... the more you learn there is more to learn.

  5. #5
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    822
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Good points. I'll see what I can make sense of. I may need help!


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
  •