CodingForums.com - resopnsive site loses style when browser is resized

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - resopnsive site loses style when browser is resized (http://www.codingforums.com/showthread.php?t=281415)

jarv	11-07-2012 02:21 PM

resopnsive site loses style when browser is resized

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

VIPStephan

11-07-2012 02:42 PM

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

DanInMa

11-07-2012 02:57 PM

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

11-07-2012 03:36 PM

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	11-07-2012 04:36 PM

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

11-07-2012 04:50 PM

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	11-07-2012 05:19 PM

I have just added

Code:



/* 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

11-07-2012 05:28 PM

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	11-07-2012 08:14 PM

theres about 20px width play on Nexus 7

All times are GMT +1. The time now is 12:27 AM.