resopnsive site loses style when browser is resized

[jarv]

On my website here, why does it lose the styles when I resize the browser?

[VIPStephan]

Works for me in Firefox. But note that valid HTML is a good prerequisite for cross-browser compliant websites.

[DanInMa]

if you go small enough stephan the font size increases drastically and the input boxes shrink. I couldnt figure it out so I didnt comment but it's weird. I think its got something to do with the table rows but ic ant figure it out

[tracknut]

I don't see a particular media query that will trigger when your browser is small, presuming its not an iphone. So the style label { font-size: 22px; } is not present at small window sizes.

Dave

[jarv]

that's not a problem, works fine on iPhone and iPad, just need it working on Nexus 7

there's about 20px play in the width?!

[tracknut]

I don't have a nexus 7 to check, have you verified that your expected media queries are working right on it? I'm assuming they're not working, the same way they're not working for me in Firefox.

Dave

[jarv]

I have just added

/* Nexus 7 (portrait and landscape) ----------- */
@media only screen and (min-device-width : 603px) and (max-device-width : 966px) {
    ul.top-menu { background: yellow; }
}

/* Nexus 7 (landscape) ----------- */
@media only screen and (min-width : 604px) and (orientation: landscape) {
    ul.top-menu { background: green; }
}

/* Nexus 7 (portrait) ----------- */
@media only screen and (max-width : 603px) and (orientation: portrait) {
    ul.top-menu { background: orange; }
}

still no joy....

[tracknut]

So it's not seeing the queries. Why not just add a default of "regular" css in front of all your queries, to cover the case of a browser smaller than 640 or 480px? You've got no styling in there now for the case where a media query isn't available.

Dave

[jarv]

theres about 20px width play on Nexus 7