...

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



jarv
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?

VIPStephan
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.

DanInMa
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

tracknut
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.

Dave

jarv
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?!

tracknut
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.

Dave

jarv
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....

tracknut
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.

Dave

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum