Need Help: CSS Media Queries

HTML & CSS
1

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

2

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.


html, body {
    height:  100%;
  [B]  /*overflow:  auto;*/[/B]
    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

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

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. :slight_smile: