SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Need Help: CSS Media Queries

    Hello SitePoint Community,

    Recently I have watched a Think Vitamin video tutorial on Media Queries (which came on a disc alongside .Net Magazine). I have tried to implement a similar mock up blog page so that I could create media queries for it and so on as to learn such media queries. I have gotten the media queries to work but when I view the page using my I Phone 4 it doesn't show any content below the fold so a substantial amount of the page is not visible.

    The user-scalable minimum and maximum scale settings work great as the page resizes itself as I change the orientation of the I Phone it's just a weird problem with the scrolling on the I Phone 4. (Source Code attached (.zip))

    P.S Ignore the horizontal Nav css issues.

    Regards,

    LTGoldman
    Attached Files Attached Files

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,550
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The content is hidden because you have set overflow:auto on the html and body elements. Just remove that rule and it will work.

    Code:
    html, body {
        height:  100%;
        /*overflow:  auto;*/
        background-color:  #00333C;
    }
    Remember the iphone doesn't like any scroll elements although you can scroll them with two finger scrolling but this won't be apparent to users so always remove any overflow other than visible from your elements.

  3. #3
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Quote Originally Posted by Paul O'B View Post
    Hi,

    The content is hidden because you have set overflow:auto on the html and body elements. Just remove that rule and it will work.

    Code:
    html, body {
        height:  100%;
        /*overflow:  auto;*/
        background-color:  #00333C;
    }
    Remember the iphone doesn't like any scroll elements although you can scroll them with two finger scrolling but this won't be apparent to users so always remove any overflow other than visible from your elements.
    Thanks for this, it now works fine. I will look into css overflow properties as i'm not sure what you mean by "remove any overflow other than visible" (I've just had a peek at w3schools and can see that visible is a property value) - it's one I've not used before which is why I hadn't heard of it before.

    Thanks for your help


    Regards,

    Tom (LTGoldman: just an alias I like to use; big fan of Tour of Duty)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,550
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tombelcher7 View Post
    Thanks for this, it now works fine. I will look into css overflow properties as i'm not sure what you mean by "remove any overflow other than visible" (I've just had a peek at w3schools and can see that visible is a property value) - it's one I've not used before which is why I hadn't heard of it before.
    Hi,

    Visible is the default for overflow and you don't need to set it unless uou are counteracting "auto" or "scroll". Visible just means that content will spill out if it overflows and won't be hidden or kept inside with a scrollbar.

    The iphone only shows a scrollbar on the natural viewport so you need to ensure that all elements for the iphone are at the edfualt of overflow:visible which they all will be unless you have added rules to change them.

    BTW use the Sitepoint CSS reference to look up stuff quickly.


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
  •