change css depending on screen resolution

is it possible?

[dillonstars]

Is it possible to show/hide divs with CSS depending on what screen resolution you are using?

For example, I would like to show a thinner sidebar div when the resolution is 800x600 or below, than the regular one I use which is suitable for 1024x768 or higher.

[Robin_reala]

CSS3 Media Queries [w3.org]:

@import 'main_styles.css';
@media screen and (min-width: 800px) {
@import 'thicker_sidebar.css';
}

Of course as with anything CSS3 support is spotty. I believe Opera's pretty good, and new versions of Safari (3+?) I think also support it. Otherwise, you're back to using Javascript to test the width of the screen (window.innerwidth) and load the stylesheet as and when.

[edited by: Robin_reala at 4:06 pm (utc) on Sep. 24, 2007]

[dillonstars]

Thanks. I don't want to start using css3 until it is more widely supported so I guess I'll try a javascript solution.

I'm not very adept at writing javascript though. Can you give me any tips or snippets on how to do this? Maybe I should ask in the Javascript forum...

[encyclo]

Continued here: [webmasterworld.com...]