CODEWITHSUNDEEP
css
wake
wake

Reputation: 21

CSS3 media query doesn't seem to be working

I have a problem with media query which doesn't seem to be working correctly.

.cl-home h1
{
    font-family: Raleway;
    position:absolute;
    top: 20%;
    left: 10%;
    font-size: 150px;
    color: white;
    border: 1.5px solid white;
    padding: 10px;
    @media screen and (max-width: 640px){
        font-size: 80px;
    }

}

I thought that on devices with width inferior to 640px, the font size would automatically change to 80px. But nothing changes. Am I doing anything wrong or do I not understand how media query works?

Upvotes: 2

Views: 38

Answers (3)

Marco Mercuri
Marco Mercuri

Reputation: 1127

You can't insert a media query inside a CSS properties block. Try this:

.cl-home h1
{
    font-family: Raleway;
    position:absolute;
    top: 20%;
    left: 10%;
    font-size: 150px;
    color: white;
    border: 1.5px solid white;
    padding: 10px;
}
@media screen and (max-width: 640px){
    .cl-home h1 {
        font-size: 80px;
    }
}

media queries define (and override) new properties only if their condition are verified.

Upvotes: 0

Ben
Ben

Reputation: 4279

Try this

.cl-home h1{
    font-family: Raleway;
    position:absolute;
    top: 20%;
    left: 10%;
    font-size: 150px;
    color: white;
    border: 1.5px solid white;
    padding: 10px;

}


@media screen and (max-width: 640px){
    .cl-home h1{
        font-size: 80px;
    }    
}

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128771

Selectors are contained within media queries, not the other way around:

.cl-home h1 {
    font-family: Raleway;
    position:absolute;
    top: 20%;
    left: 10%;
    font-size: 150px;
    color: white;
    border: 1.5px solid white;
    padding: 10px;
}

@media screen and (max-width: 640px) {
    .cl-home h1 {
        font-size: 80px;
    }
}

Upvotes: 5

Related Questions