2

Still new, but played with this for a bit. In the CSS parent .article I have the height set. When I try to have the height in the @media with <768 nothing happens.

https://jsfiddle.net/avryx/1wusmqn6/21/

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

@media screen and (max-width:767px) {

    .article {
        padding: 5% 10%;
        height: 1000px;
    }

}

.article {
    background-color: #404040;
    height: 470px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    margin-top: 2%;
    margin-bottom: 2%;

}
user3542753
  • 65
  • 6

1 Answers1

3

Because css is read from top to bottom. The rule that is set last, is the one that will be executed, So use @media below .article, like this:

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.article {
    background-color: #404040;
    height: 470px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    margin-top: 2%;
    margin-bottom: 2%;

}

@media screen and (max-width:767px) {

    .article {
        padding: 5% 10%;
        height: 1000px;
    }

}

Demo

Ehsan
  • 12,655
  • 3
  • 25
  • 44
  • 1
    Thank you :). Do you know if this is generally how it behaves? I think I've seen other CSS where users had the media above the rest of the CSS. Didn't know the position of where the media mattered. – user3542753 Feb 13 '20 at 02:51
  • 1
    read this : https://stackoverflow.com/questions/24456981/why-do-i-have-to-put-media-queries-at-the-bottom-of-the-stylesheet – Ehsan Feb 13 '20 at 02:52