CSS @media is not working

Asked

Viewed 21 times

0

when the site is less than 600px, you should activate @media, but not enter

* {
    font-family:Arial;
}
body {
    margin:0;
    padding:0;
}
header {
    display: flex;
    justify-content: center;
}
.container {
    width: 800px;
    height: 100px;
    background-color: #727272;
}
.topo {
    text-align: center;
    font-size: 20px;
}
article {
    display: flex;
    justify-content: center;
}
.musicas {
    padding-top: 10px;
    width: 800px;
    background-color: #b9b9b9;
}
.track {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.namefile {
    text-transform: uppercase;
    margin-left: 10px;
    font-weight: bold;
}
.control {
    width: 300px;
    padding-bottom: 10px;
}

@media (max-width: 600px) {
    body {
        background-color: tomato;
    }
    header .container {
        width: auto;
    }
    article .musicas {
        background-color: teal;
    }
}
css css3

  • You have <meta name="viewport" content="width=device-width, initial-scale=1.0"> in the Head of HTML?

  • I even have, but it was missing parts, wow that stupid kkk, I think I need to rest

  • puts as an answer that I end here

  • put the answer (-:

1 answer

0


To the media queries work you must have this tag on head of your HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.