Media querie is ignoring attributes

Asked

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?

css3 responsive-layout media-queries

  • 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...

  • 1

    In the first code is missing close the keys.

  • 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?

  • @Taisbevalle I forgot to glue the lock of the key here, but in my code ta closed.

  • !Import and be happy.

  • 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 ?

  • At first, put all your midiaqueries at the end...

  • @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.

  • 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 followed the tip of kennyRafael and it worked. I put the midiaqueries at the end of CSS. Thanks to tds.

  • Thank you @Kennyrafael

  • Dispose.... ;)

Show 7 more comments

1 answer

0


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.

  • 1

    Thank you very much. This trick helped a lot.

Browser other questions tagged css3 responsive-layout media-queries

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