homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

change css depending on screen resolution
is it possible?

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

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)

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)

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)

Continued here: [webmasterworld.com...]

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved