Media Queries aren't working in Codepen

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? :upside_down_face:

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;
    }
}
1 Like

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.

1 Like

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

1 Like

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;
  }
}
2 Likes

That nailed it! Thank you so much for helping me out :+1: :heart:

1 Like