Css depending on screen size

Question

I try to change the CSS according to the size of the screen, I tried with a simple example to understand the principle except that it did not work for me, here is my code.

    @media (max-width: 800px) {
       p{
       color: red;
        }
    }

    <head>
     <title>Css depending on screen size</title>
     <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <p>This is a test paragraphe</p>
    </body>

Thank you for your help

This is a very broad question, and it doesn't look like your CSS is wrong. Have you tried one of the great online tutorials, such as [this MDN one](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)? — samiles, Dec 15 '16 at 09:41
When I change screen size i expect text color to be red, but nothing happens. — khalid essalhi, Dec 15 '16 at 09:44
look [**here**](https://jsfiddle.net/12d9pqw3/) everything works — theoretisch, Dec 15 '16 at 09:45

score 1 · Accepted Answer · answered Dec 15 '16 at 09:42

1

To work rule @media add section <head>:

<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1">

answered Dec 15 '16 at 09:42

Alex

409
3
18

only this will not enough he need media queries knowledge also and how to use them effectively – Mirza Obaid Dec 15 '16 at 09:45
Thanks, this solved the problem – khalid essalhi Dec 15 '16 at 09:56

Css depending on screen size

1 Answers1