Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

change css depending on screen resolution

is it possible?



3:56 pm on Sep 24, 2007 (gmt 0)

10+ Year Member

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.


4:06 pm on Sep 24, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

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]


4:08 pm on Sep 24, 2007 (gmt 0)

10+ Year Member

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


12:47 am on Sep 25, 2007 (gmt 0)

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Continued here: [webmasterworld.com...]

Featured Threads

Hot Threads This Week

Hot Threads This Month