Media Queries works on smartphones but not on tablet resolution

Question

Media Queries works on smartphones but not on tablet resolution

Navigation

#1 by (2 votes)

0

I'm creating a page with responsive layout, regarding the resolution of smartphones works normally, when increase for tablet gives no results. Why?

@media(max-width:480px){
    div#formulario{
        width: 250px; 
        height:300px;
    }   
}

@media (min-width:481px)and(max-width:960px){
    div#formulario{
        width: 350px; 
        height:400px;
    }
}

@media(min-width:961px){
    div#formulario{
        width:450px; 
        height:500px;   
    }
}

css3

asked by anonymous 18.10.2014 / 03:13

1 answer

How do I add characters to a native iOS keyboard type? How to return 2 decimals in a monetary value with jQuery?

score 2 · Accepted Answer

I made an example with your code and also some settings in CSS (specification of minimum and maximum sizes).

#formulario {
    background:#000;
}

@media (max-width: 480px ) {
    #formulario {
        width: 200px;
        height: 200px;
    }
}

@media (min-width: 480px) and (max-width: 960px) {
    #formulario {
        width: 400px;
        height: 400px;
    }
}

@media (min-width: 960px) {
    #formulario {
        width: 600px;
        height: 600px;
    }    
}

JSFIDDLE Example

Just to complement, let's clarify the rule:

We are on a screen of 800x600px (Width x Height) when accessing the site the rule applied will be:

@media (min-width: 480px) and (max-width: 960px)

Because at a minimum resolution of 480px up to a maximum of 960px the rules apply.

If the resolution is greater than 960px the rule that will be applied will be:

@media (min-width: 960px)