0

It is quite simple. What I want to do is change the color of my h1 with media queries. This is just to test and see if they are working. Which they are not. As you can see in the screenshot I want to make to color red when it's mim. 600px and blue when it's min. 768px.

As you can see in the screenshot it is 634px wide, which should trigger the min. 600px media query but it is actually triggering the min. 768px query. Which makes little sense.

Can you help me on my quest to make a responsive webseite. I thank thei who helpeth...

The screenshot

CSS code:

@media only screen and (min-width: 600px) {
    h1{
        margin-top: 15%;
        font-size: 3.5rem;
        color: red;
    }}

@media only screen and (min-width: 768px) {
    h1{
        margin-top: 15%;
        font-size: 3.5rem;
        color: blue;
    }}
Samuel
  • 1

1 Answers1

0

You are forgetting to use meta tags

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
Sato Takeru
  • 1,669
  • 4
  • 12
  • 27