Does anyone know how I can specify a Media Query for each device? I am trying to leave the one of the iphone 6, 7 and 8 in a way and in the same cell phones only that version Plus I am changing to fit in the layout only that it does not go, always one ends up going over the other and it is scratched as you can see, does anyone know how I can use both?
Summary
Let's assume that the device's screen width has 667px . The media queries will be met. Since the media querie greater max-width is after the lower max-width it is overlapping, this by convention of CSS what is declared later will override what was declared before.
Solution
Just reverse the%% of position, that is, you first declare the media queries greater media querie and then the lower%.
Example:
@media only screen and (max-width: 736px){
.titulo{
color: red;
}
}
@media only screen and (max-width: 667px){
.titulo{
color: blue;
}
}<h1 class="titulo">
Teste
</h1> The two max-width continues to be serviced by the device, but this time the one that prevails is the smaller media queries because it is later.