View Full Version : resopnsive site loses style when browser is resized

11-07-2012, 03:21 PM
On my website here, (http://www.motortradequestions.com/toolbox/win-toolbox.html) why does it lose the styles when I resize the browser?

11-07-2012, 03:42 PM
Works for me in Firefox. But note that valid HTML (validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.motortradequestions.com%2Ftoolbox%2Fwin-toolbox.html) is a good prerequisite for cross-browser compliant websites.

11-07-2012, 03: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

11-07-2012, 04: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.


11-07-2012, 05: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?!

11-07-2012, 05: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.


11-07-2012, 06:19 PM
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....

11-07-2012, 06: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.


11-07-2012, 09:14 PM
theres about 20px width play on Nexus 7