locked
CSS @media query not working RRS feed

  • Question

  • User-880296261 posted

    I am not sure what I am doing wrong so I pasted a very small example.  I have tried using classes and ids.  Also I have tried removing the 'only', 'screen', and, 'and' keywords in the media query.  I have tried loading it into different browsers.  In FireFox the DevTools give me two errors:  

    Expected ‘:’ but found ‘background-color’.  Declaration dropped

    Expected ‘:’ but found ‘}’.  Declaration dropped.

    <!DOCTYPE html>
    < html lang= "en">
    < head>
        <title> Test </title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />

       <style>
        p{
           background-color: red;
        }  

    @media only screen and (max-width: 480px){
            p{
                background-color: blue;
            }
        }
        </style>

    </head>
    < body>
    < p> Test </p>
    < /body>
    < /html>

    Sunday, October 30, 2016 12:56 PM

Answers

  • User-183374066 posted

    I just checked your code in an html file. It is working for me. You can copy following code into an html file and give it a try

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title> Test </title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    
        <style>
            p {
                background-color: red;
            }
    
            @media only screen and (max-width: 480px) {
                p {
                    background-color: blue;
                }
            }
        </style>
    
    </head>
    <body>
        <p> Test </p>
    </body>
    </html>

    See demo http://screencast.com/t/ie7ZqgLyrzQk

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, October 30, 2016 6:30 PM

All replies

  • User-183374066 posted

    I just checked your code in an html file. It is working for me. You can copy following code into an html file and give it a try

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title> Test </title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    
        <style>
            p {
                background-color: red;
            }
    
            @media only screen and (max-width: 480px) {
                p {
                    background-color: blue;
                }
            }
        </style>
    
    </head>
    <body>
        <p> Test </p>
    </body>
    </html>

    See demo http://screencast.com/t/ie7ZqgLyrzQk

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, October 30, 2016 6:30 PM
  • User-474980206 posted

    if you are using razor pages, you need to quote the "@":

    <style>
        p{
           background-color: red;
        }  
    
        @@media only screen and (max-width: 480px){
            p{
                background-color: blue;
            }
        }
        </style>
    

    Sunday, October 30, 2016 10:05 PM
  • User57483488 posted

    Try this, hope this will help you:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title> Test </title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
            p {
                background-color: red;
            }

            @media screen and (min-width:0px) and (max-width: 480px) {
                p {
                    background-color: blue;
                }
            }
           
        </style>
    </head>
    <body>
        <p> Test </p>
    </body>
    </html>

    Monday, October 31, 2016 6:22 AM