Media Queries aren't working in Codepen

[Pola]

Hey,
I am new to web development and I recently started to work on the Produkt Landing Page-Project. I was writing the code with Visual Studio Code and everything worked fine there, but the media queries don’t behave as they should after I uploaded the code to codepen.
Can somebody point me out, where I made a mistake?

Here’s the link to my codepen
ProductLandingPage Codepen

@media (max-width: 420px) {
    header {
        font-size: 0.7em;
    }
}

@media (max-width: 600px) {
    .FlexInhalte {
     flex-direction: column;
    }
    
    h2 {
        text-align: center;
    }

    iframe {
        width: 280px;
        height: auto;
    }
}

@media (max-width: 860px) {
    header {
        flex-shrink: 7;
    }

    nav > ul {
        display:flex;
        flex-direction: column;
        justify-content: space-around;
        width: 35vw;
    }
}

[Arskeliss]

Hey,

Welcome,

The correct form of using @media query if the following:

@media only screen and (max-width: 460px){
    /*Here comes the actual code*/
}

At .FlexInhalte class maybe you want to specify the display: flex; property for the flex-direction: column; to work properly, because I didn’t see it specified anywhere else in your code.

Also, you could check out the @media query types for further reference.

Hope that helps.

[Annestezia]

Hey,
If you check browser inspector you’ll see that media queries are applied but some of them are overwritten by other css
You can either increase specificity of selectors in media-queries or move media-queries to the end of your css or after the rules for selectors you apply them to
Hope this is understandable
++theres a missing bracket the easiest way to find it is use codepen analyze tool

[lasjorg]

max-width media queries should come after the rules they are meant to overwrite, not before.

body {
  background: red;
}

@media (max-width: 800px) {
  body {
    background: blue;
  }
}

[Pola]

That nailed it! Thank you so much for helping me out