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>