Welcome to WebmasterWorld Guest from 54.147.238.62

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)

Preferred Member

10+ Year Member

joined:June 10, 2003
posts: 598
votes: 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 Sept 24, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 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 Sept 24, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:June 10, 2003
posts: 598
votes: 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 Sept 25, 2007 (gmt 0)

Senior Member from CA 

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

joined:Aug 31, 2003
posts:9073
votes: 4


Continued here: [webmasterworld.com...]
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members