I am modifying the css of my project and at the same time doing tests in preview of it only that the design changes and now I have 2 media queries (one for mobiles and the other for tablets) but when saving the css file when the 2 are in a single file, several parts are distorted, such as the texts, although in each of the media queries they have a different font size, and in the same way the sizes of the images that I am using are modified.
In the html I use the meta tag and the link to the style sheet as follows:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1, maximum-scale=1">
<link rel=stylesheet href="../CSS/style.css" type="text/css" media=screen>
And this is the content that is modified:
<div class="cabeceraLogo" id="cabLogo">
<a href="../HTML/index.html"><img class="logoPCM" src="../RSC/logos/logo.png" alt="logotipo PCM"></a>
</div>
<div class="cabeceraCentral">
<p><b>todos nuestros precios son el mínimo en pagos al contado</b></p>
</div>
The current css is:
*{
margin:0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat-medium-webfont',verdana,sans-serif;
}
@media screen and (max-width:360px) {
...
.cabeceraLogo{
width: 100%;
line-height: 3em;
padding: 0.4375em 0.625em;
background: #000;
z-index: 80;
}
.logoPCM{
height: 2.375em;
margin: auto;
display: block;
vertical-align: middle;
}
/*-------------------------------------------------------*/
.cabeceraCentral{
width: 100%;
line-height: 1.5625em;
background: #E6E6E6;
text-align: center;
color: #000;
text-transform: uppercase;
font-size: 11px;
z-index: 80;
}
.cabecerCentral p{
font-family: 'Montserrat-medium-webfont',verdana,sans-serif;
}
.cabeceraCentral p::before{
content: open-quote;
}
.cabeceraCentral p::after{
content: close-quote;
}
...
}
@media screen and (max-width:599px) {
...
.cabeceraLogo{
width: 100%;
line-height: 3em;
padding: 0.4375em 0.625em;
background: #000;
z-index: 80;
}
.logoPCM{
height: 2.375em;
margin: auto;
display: block;
vertical-align: middle;
}
/*----------------------------------------------------------------------------*/
.cabeceraCentral{
width: 100%;
line-height: 1.5625em;
background: #E6E6E6;
text-align: center;
color: #000;
text-transform: uppercase;
font-size: 0.68750em;
z-index: 80;
}
.cabecerCentral p{
font-family: 'Montserrat-medium-webfont',verdana,sans-serif;
}
.cabeceraCentral p::before{
content: open-quote;
}
.cabeceraCentral p::after{
content: close-quote;
}
...
}
I also plan to increase 2 queries , although I don't think it has any influence, I'm editing in Atom and I preview it right there.
What do I have to modify or what can you recommend?
You can define a minimum and a maximum. All the style defined between 360 and 599 would be for your tablet.