CSS 3 support for @ screen media

peterb · Post by **peterb** » Fri Aug 26, 2016 7:19 pm

I have CSS 3 code that works on soemone elses site (w3 schools) but won't work in my vestacp hosted site.

Any ideas or a work around?

Specifically;

Code: Select all

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: pink;
}

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
</style>
</head>
<body>

<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>

</body>
</html>

@media screen is not responding !

peterb · Post by **peterb** » Fri Aug 26, 2016 7:34 pm

OMG solved :-(

I've spent 4 hours trying to fix this :-(

The FUNNY part ?

I turned on Chromes CONSOLE and it started to work
I truned off Chromes console and it STOPPE Dworking

HUH ? Exactly !

SOLUTION: My browser doesn't actually shrink to 480px = OMG !!!!!!!

On the w3 schools example, they must somehow have shrunk down the view port to make their 480 example work.
Now I've set the trigger width to 700px it works perfectly

But now I'm SO fed up with it, I cna;t be bothered to go back to coding where I was 4 hours ago.... LOL

Vesta Control Panel - Forum