CODEWITHSUNDEEP
htmlcss
B. Bee
B. Bee

Reputation: 5

Why arent my media queries arent working

I have my media queries underneath my normal css, all in the same file, and even put !important tags on them... but they wont work when testing them on different window sizes. I feel like i have tried it all but it keeps defaulting to the normal css. Not looking for solutions to all of the issues, but a reason why this is happening. For example, lets just take the h1 title... it doesnt adapt to my media queries. Any help is appreciated!

heres the site: https://slhosp.net/

.content{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
}

div.content h1 {
color: white;
font-weight: 800;
font-size: 5vw;
padding: 30px;
}

div.content p {
color: white;
font-weight: 300;
font-size: 1.5vw;
padding: 30px;
}


@media (min-width: 801px) and (max-width: 1100px) {
.div.content h1 {
    font-size: 8vw;
    padding: 0px;
}
div.content p {
    font-size: 3vw;
    padding: 10px;
}
}

@media (min-width: 451px) and (max-width: 800px) {
.div.content h1 {
    font-size: 8vw!important;
    padding: 0px!important;
}
div.content p {
    font-size: 3vw!important;
    padding: 10px!important;
}
}

@media (max-width: 450px) {
.div.content {
    top: 25%!important;
}
.div.content h1 {
    font-size: 8vw!important;
    padding: 0px!important;
}
div.content p {
    font-size: 4vw!important;
    padding: 10px!important;
}
}

Upvotes: 0

Views: 40

Answers (1)

ogie
ogie

Reputation: 1470

You have a dot in front of the div, meaning it's looking for a class of "div". Should just be :

div.content h1 {}

You have :

.div.content h1 {}

Upvotes: 1

Related Questions