CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Eriks Eriks
Eriks Eriks

Reputation: 21

@media query for larger screen is used on smaller screens

I am using two media screen resolutions, and the problem is that, at 320px it takes margin-left: 16% which is intended for 480px screens. How can I separate these styles, so at 320px it takes what`s inside it and so on.

@media screen and (max-width: 320px) {
    .signup-btn {margin-left: 4%;}
}
@media screen and (max-width: 480px) {
    .signup-btn {margin-left: 16%;}
}

Upvotes: 0

Views: 91

Answers (3)

GolezTrol
GolezTrol

Reputation: 116190

Both styles apply. After all, the screen width of 100px is still less than 320px and also less than 480px. Both declarations have the same 'weight' and the second one therefor overrules the first, purely based on the order in which they are specified.

To overcome this, specify a min-width as well:

@media screen and (max-width: 320px) {
    .signup-btn {margin-left: 4%;}
}
@media screen and (min-width: 321px) and (max-width: 480px) {
    .signup-btn {margin-left: 16%;}
}

or change the order:

@media screen and (max-width: 480px) {
    .signup-btn {margin-left: 16%;}
}
@media screen and (max-width: 320px) {
    .signup-btn {margin-left: 4%;}
}

Both should work and both have advantages and disadvantages. When adding a min-width, the declaration is more clear and less confusion can be made. The rule makes it very clear that it is only for 320+ and 480- resolutions.

The advantage of the other one is that it is less CSS, also you can set properties that apply to small screens (480-) in general, and only define extra overrules in the 320 version. This keeps the CSS smaller, but in my opinion also less clear.

Upvotes: 1

Salman Arshad
Salman Arshad

Reputation: 272396

If you are specifying only max-width then:

  1. Place the default rules at the top
  2. Place the rules that use max-width media queries afterwards, sorted by max-width descending:
/* rules for > 800px */

@media screen and (max-width: 800px) {
    /* rules for 800px and less */
}
@media screen and (max-width: 480px) {
    /* rules for 480px and less */
}
@media screen and (max-width: 320px) {
    /* rules for 320px and less */
}

The sorting order is important. In the above example, if the screen is 320px wide then it satisfies all three conditions (max-width: 320px, max-width: 480px, max-width: 800px). In this case the rules declared last win; hence the rules are sorted that way.

Upvotes: 1

Justinas
Justinas

Reputation: 43557

Add min-width:

@media screen and (min-width: 321px) and (max-width: 480px) {
    .signup-btn {margin-left: 16%;}
}

Upvotes: 1

Related Questions