Why is not a div displayed using mediaqueries in HTML?

Question

Why is not a div displayed using mediaqueries in HTML?

Navigation

#1 by (3 votes)

2

I have two div one with a yellow background and one with a red background, the red background should be seen in a resolution greater than 800px and the yellow in the resolution less than or equal to 800px, the red div works fine but the yellow one does not it is visualized at the moment of seeing it on a cell phone or shortening the width of the browser I am using mozilla firefox

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    @media screen and (max-width:800px)
    {
        .menu1
        {
            display:block;

        }

        .menu2
        {
            display:none;

        }
    }
</style>
 </head>
 <body>

  <div class='menu1' style='display:none;background:#FFFF00'>
    menu_celular
  </div>

  <div class='menu2' style='background:#FF0000'>
    menu_pc
 </div>
 </body>
 </html>

html5 html css

asked by goku venz 26.08.2017 в 15:30

source

1 answer

Convert variable to Barcode SQL INNER JOIN with three tables

score 3 · Accepted Answer

CSS is cascading style sheets, this means that they will go applying one after another.

In the CSS properties there are priorities as to which style to apply and these depend on how you include CSS in your code, since you can have:

1) Style sheets imported in meta .

// <link rel="stylesheet" href="css/style.css">

2) Tags of style within meta .

// <style></style>

3) Tags of style within the HTML tags (known as inline ).

// <input type="text" style='display:none;'>

The priority that CSS takes to choose which one to apply is this:

1) First style tags within HTML elements (known as inline ).

2) External files or included in meta (points 1 and 2 of the previous scale).

3) Default browser style.

That is, even if your code CSS is good, when activated @media will find that you should hide the menu2 and show the menu1 , but when it reaches menu1 you get display:none and hide it for having more priority.

How is it solved? : we remove the style tag from the element and place it as a class like this:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    .menu1{
        display:none;
    }
    @media screen and (max-width:800px)
    {
        .menu1
        {
            display:block;

        }

        .menu2
        {
            display:none;

        }
    }
</style>
 </head>
 <body>

  <div class='menu1' style='background:#FFFF00'>
    menu_celular
  </div>

  <div class='menu2' style='background:#FF0000'>
    menu_pc
 </div>
 </body>
 </html>

In this way, the display:none is applied when you are below the 800 width and when you change to @media we show the menu1