CODEWITHSUNDEEP
htmlcssgridmedia
Gustavo Rios
Gustavo Rios

Reputation: 81

Media queries do not seem to be working

I'm trying to add a media query to my page but it doesn't seem to work

I'm still new and don't completely grasp how media queries work yet

Here's the code for the media query:

@media screen (max-width:320px){h1{font-size:0.75em;}h1{font- 
size:0.8em;}p{font-size:0.8em;}figcaption{font-size:0.8em;}.img-style{max- 
width:45px;max-height:45px;}#profile-link{max-width:55px;max- 
height:55px;}#navbar{text-align:center;}}

Here's the codepen: https://codepen.io/don0ts/pen/JByjqO

Upvotes: 0

Views: 76

Answers (3)

pjk_ok
pjk_ok

Reputation: 967

You're missing the and word off.

@media screen 
and (max-width: 320px) {

  //styles go here

}

Upvotes: 0

Laurentiu Tibea
Laurentiu Tibea

Reputation: 67

You can use this code, just delete "screen" from "@media screen". 

    @media (max-width:320px){
      h1{
        font-size:0.75em;
      }
      h1{
        font-size:0.8em;
      }
      p{
        font-size:0.8em;
      }
      figcaption{
        font-size:0.8em;
      }
      .img-style{
        max-width:45px;max-height:45px;
      }
      #profile-link{
        max-width:55px;max-height:55px;
      }
      #navbar{
        text-align:center;
      }
  }

Or you can change to "@media only screen and (max-width:320px)".

Upvotes: 0

Denis2310
Denis2310

Reputation: 1218

Try to write like this: "@media only screen and" instead of "@media screen"

Upvotes: 1

Related Questions