Automatically change css when resolution is changed

Question

What I've done is this

 <link type="text/css" rel="stylesheet" media="screen and (max-device-width: 1300px)" href="css/style.css">
<link type="text/css" rel="stylesheet" media="screen and (min-device-width: 1301px)" href="css/big.css">

The most important change dependent on the resolution is the following. The big.css uses this

.content
{
    width:20%;
}

and the style.css uses 50% for the width.

My problem now is, that I have two monitors. The right one responds to the style.css and the left one to the big.css When I now open the site on my right monitor it uses the style.css. The problem is, that when I grab the window and drag it to my left monitor the .css doesn't change UNLESS I reload the page. But I want it automatically to be changed when the window is dragged to a bigger screen. Maybe this is possible with JavaScript?

I have a hard time understanding why one should do that when you can work on responsive design. — Akki619
– Akki619, Commented Jul 31, 2013 at 10:28
you have two href in links..remove the first that point to style.css in both links. — Sbml
– Sbml, Commented Jul 31, 2013 at 10:28
Whops, sorry, I already deleted this, but didn't in the post yet. Sorry @Akash - I'm working with responsive design but 50% of a 1920px width monitor looks far more worse than on a 1280px monitor, so I want to give the 1920px-viewrs only 20% — loomie
– loomie, Commented Jul 31, 2013 at 10:31

Sbml · Accepted Answer · 2013-07-31 10:36:29Z

4

<link type="text/css" rel="stylesheet" media="screen and (max-width: 1199px)" href="css/style.css">
<link type="text/css" rel="stylesheet" media="screen and (min-width: 1200px)" href="css/big.css">

You could put also all styles in one file:

<link type="text/css" rel="stylesheet" media="screen" href="css/style.css">

CSS

/* Desktops and laptops ----------- */
@media only screen 
and (max-width : 1199px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1200px) {
/* Styles */
}

edited Jul 31, 2013 at 10:36

answered Jul 31, 2013 at 10:30

Sbml

1,9172 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

loomie Over a year ago

Hey thanks for your work, but sorry, this isn't the fix. I edited my initial post. I know you couldn't read it because since your post and my edit 2 minutes have been gone

loomie Over a year ago

Thanks again, now I've read your edit. This works like a charm! Now updates it instantly when I drag it. Thanks

Sbml Over a year ago

I'm glad to help. I fix the two css links in my answer and I think that now both ways works well.

Collectives™ on Stack Overflow

Automatically change css when resolution is changed

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related