Media querie is ignoring attributes

Question

Media querie is ignoring attributes

Asked 8 years ago

Viewed 111 times

0

I’m trying to get a DIV only be shown on small screens, then set 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 doesn’t work. I tested the opposite:

display:none;

in the standard css and

display: block;

at breakpoint and it worked, because this is happening?

Harry, how’s the content exactly? if the code that is valid for the other resolutions is after the midiaquerie, it will overwrite what you defined in it...

– Kenny Rafael

2016/10/28 at 11:31
1

In the first code is missing close the keys.

– Taisbevalle

2016/10/28 at 11:32
the code of the other resolutions is after. All media must be at the end, after the "main" code? why some attributes do not work?

– Harry Carvalho

2016/10/28 at 12:28
@Taisbevalle I forgot to glue the lock of the key here, but in my code ta closed.

– Harry Carvalho

2016/10/28 at 12:30
!Import and be happy.

– Mauro Alexandre

2016/10/28 at 13:29
What exactly isn’t working ? Which attribute is being ignored ? It’s the display ? Everything is in the same stylesheet ? How is the html of the element bloco, possesses some stylestraight into html ?

– MagicHat

2016/10/28 at 13:35
At first, put all your midiaqueries at the end...

– Kenny Rafael

2016/10/28 at 13:44
@Magichat the attribute display:none does not work. the div appears in larger screen, but does not appear in width less than 460px: I want exactly the opposite, only appear in small screen. It seems that the mediaquerie is being superimposed.

– Harry Carvalho

2016/10/28 at 14:03
Only with this fragment of code you have placed, I do not believe it is possible to state precisely the cause. Put the html and css of the respective page, and surely you will have the solution.

– MagicHat

2016/10/28 at 14:19
@Magichat followed the tip of kennyRafael and it worked. I put the midiaqueries at the end of CSS. Thanks to tds.

– Harry Carvalho

2016/10/28 at 14:45
Thank you @Kennyrafael

– Harry Carvalho

2016/10/28 at 14:45
Dispose.... ;)

– Kenny Rafael

2016/10/28 at 15:52

Show 7 more comments

1 answer

Browser other questions tagged css3 responsive-layout media-queries

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

by Fernando Farias • 86 points · Answer 1 · 2016-10-28T19:18:08+00:00

CSS has top-down reading behavior, applying the rule you find last.

Usually when we use media queries, they end up using the same selectors that we used previously to define some "generic" patternso you need to put your media query setting at the end of the file so that it overwrites the settings made earlier.

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

I hope I’ve helped.