CODEWITHSUNDEEP
cssmedia-queries
Arun
Arun

Reputation: 39

Media Query not picking up

I was trying to change a div's width on mobile phone. Here is my css code for media query

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
 { 

         .login-page{
        width: :80% !important;;
        padding: 8% 0 0 !important;;
        margin: auto;
      }  

      body{
        background-color: red;
      }

}

I have included the following lines on my php header file

<meta name="viewport" content="width=device-width" />

<link rel="stylesheet" media="(max-width: 713px)" href="css/media.css" />

What's wrong with my approach?

Upvotes: 0

Views: 1031

Answers (3)

Jaydot
Jaydot

Reputation: 11

I just solved this - after hours of searching - by clearing the cache on the phone...

Upvotes: 1

Nehal
Nehal

Reputation: 1523

You need to change you @media as all things should appear in one line like this:

@media only screen and (min-device-width: 414px) and (max-device-width: 736px)

OR you can also try with this :

@media only screen and (min-width: 414px) and (max-width: 736px)
 { 

     .login-page{
    width: :80% !important;;
    padding: 8% 0 0 !important;;
    margin: auto;
  }  

  body{
    background-color: red;
  }

}

Also remove media from this line:

<link rel="stylesheet" media="(max-width: 713px)" href="css/media.css" />

to :

<link rel="stylesheet" href="css/media.css" />

Upvotes: 0

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10177

You need to change you @media to this

@media all and (min-width: 414px) and (max-width: 736px) 
 { 

         .login-page{
        width: :80% !important;;
        padding: 8% 0 0 !important;;
        margin: auto;
      }  

      body{
        background-color: red;
      }

}

Upvotes: 0

Related Questions