Media wants to ignore attributes

Navigation
0

I'm trying to make a DIV only show on small screens, so I've defined the following: 

@media screen and (max-width: 460px) {
    #bloco{
        display: block;
        width: 100%;
        height: 50px;
        background-color: rgb(150,125,24);
    }

Outside the mediaquerie is 

#bloco{
    display:none;
    width: 100%;
    height: 50px;
    background-color: rgb(230,25,24);
}

but it does not work. I tested the opposite: 

display:none;

in standard css and 

display: block;

In the breakpoint and it worked, Why is this happening?

    
asked by anonymous 28.10.2016 / 12:28

1 answer

0

CSS has the behavior of reading from top to bottom, applying the rule it finds last.

Generally when we use media queries, they end up using the same selectors we used previously to define some "generic" pattern, so you need to place your media query definition at the end of the file so that it overrides the previously made definitions.

It is worth remembering that it is a good practice to perform this procedure, since it facilitates the search for media queries, since they will always be at the end of the file.

I hope I have helped.

    
28.10.2016 / 21:18
Array display How to format the date in firefox [closed]