Media Queries works on smartphones but not in resolution for tablet

Asked

Viewed 290 times

0

I am creating a page with responsive layout, in relation to smartphones works normally, when increasing to tablet gives no result. 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

  • Hi Lamborghini. Gives an improved formatting of the code, please. Just [Edit] the question, select the code and click the button {} editor. More details on http://answall.com/editing-help. Well, @brasofilo left my comment obsolete even before I published it; but here’s the tip.

  • The first rule should not be min-width?

  • Sorry for taking so long to reply @bfavaretto min-width worked all this ok

  • Is it? I realize now that my suggestion doesn’t make much sense.

1 answer

2


I made an example with your code and also some adjustments 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;
    }    
}

Example JSFIDDLE

Just to complement we will 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)

For in a minimum resolution of 480px up to a maximum of 960px the rules apply.

If the resolution is greater than 960px the rule to be applied shall be:

@media (min-width: 960px)

  • very good @Diego Vieira read a topic about it and solved everything anyway was worth

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.