CSS Media Query Not Overriding

user_14194083 0
Viewed 39

I cant quiet solve this issue. I'm still pretty new to html and css but have used media queries before, but this time although it worked for one element (sub-header), it didn't work for the other (header).

/* =============Standards for Texts============== */
.sub-header {
    font-size: 1.3rem;
    font-weight: 200;
    color: hsl(229, 6%, 66%);
    margin-top: 6ch;
}

.header {
    font-size: 1.3rem;
    font-weight: 600;
    color: hsl(234, 12%, 34%);
}

.description {
    font-size: 1rem;
    font-weight: 400;
    color: hsl(229, 6%, 66%);
}

body > .sub-header, header {
    font-size: 1.5rem;
}

/* ===============Port to Desktop=============== */
@media (min-width: 800px) {
    html, body {
        width: 100%;
        height: 100%;
    }


    body > .sub-header, header {
        font-size: 3rem;
        color: red;
    }

enter image description here

media-queries overriding css html
2 Answers

You're missing a period before header in your CSS.

/* This targets a <header> tag */
header { }

/* This targets any element with a class named header */
.header { }
user_18499810

You forgot to put dot before header: .header inside your media query

user_103394630
Related