CODEWITHSUNDEEP
htmlcss
Ne Kr
Ne Kr

Reputation: 208

Media query is not called

Can anyone see why this media query does not work? The first part of the CSS .header-x1 is working fine. But I would like to change font size when the max width is 768px. But nothing happens when I run my code here. Can anybody see why? 

<p class="header-xl">
   This is a test
</p

.header-xl {
    font-weight: 900;
    font-size: 5em;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    padding-top: 160px;
    }

@media(max-width:768px) {
    header-xl  {
        font-size: 8px;
    }

Upvotes: 0

Views: 54

Answers (3)

SE_User
SE_User

Reputation: 370

Change header-xl to .header-xl

@media(max-width:768px) {
    .header-xl  {
        font-size: 8px;
    }
}

Upvotes: 0

Shawn Northrop
Shawn Northrop

Reputation: 6036

From the looks of it you need .header-xl not header-xl inside the media query

Upvotes: 0

Shahil Mohammed
Shahil Mohammed

Reputation: 3868

You are missing a . for the class in media query, Instead of header-xl add .header-xl

@media(max-width:768px) {
    .header-xl  {
        font-size: 8px;
    }

Upvotes: 4

Related Questions