Why does the chrome console flag me error in media queries?

0

Currently I want to make my website responsive, but when I want to modify some measures of some elements they do not change, for example I have a mask that covers some of my images, the image if it adapts.

Viewing my image in responsive mode.

Media queries code

/** Se crea el diseño responsivo de forma manual **/
@media only screen and (min-width: 600px) and (max-width: 1200px) {
#navegacion {
display: none;
}

#navegacionIpad {
width: 20%;
}

#imgNi {
    width: 5%;
    height: 5%;
}

/** Este el estilo que deberia modificar la altura **/
.clMascara {
    height: 10%;
    background-color: red;
}

}

Console view

In the console it shows me the figure above, I do not know if it's an error class.

HTML code

    <!-- Mascara de mario bros-->
<div id="idContenedorS" >


              <div id="Mascara" class="clMascara">

<center><span id="spnMM">

                  <p>
                Precio:$1200.00 MXN.
              </p>

              <p>
                Clasificacion: Toda la Familia.
              </p>

                <p>
                Genero: Fantasia.
              </p>

</span></center>

              </div>


    <!-- Mascara de Call of duty-->
<div id="idContenedorSW" >
              <div id="MascaraW">

<center><span id="spnMW">

                  <p>
                Precio:$1500.00 MXN.
              </p>

              <p>
                Clasificacion: Para Mayores de 16 años
              </p>

                <p>
                Genero: Guerra.
              </p>

</span></center>

              </div>


    <!-- Mascara de FIFA-->
              <div id="idContenedorSF" >
              <div id="MascaraF">

<center><span id="spnMF">

                  <p>
                Precio:$1000.00 MXN.
              </p>

              <p>
                Clasificacion: Toda la Familia.
              </p>

                <p>
                Genero: Deportes.
              </p>

</span></center>

              </div>
    
asked by David 30.08.2017 в 20:54
source

2 answers

0

Apparently when you use half queries, the other rules of css continue to affect those elements, so I had to decipher which rules affected and modify them, but also putting !important in the rules of the half queries can be resolved on problem.

    
answered by 07.10.2017 / 01:52
source
0

you can use

#clMascara {
    min-height: 10%;
    background-color: red;
} 

or the average height

    
answered by 30.08.2017 в 21:00