Select one of two layouts depending on screen width

Asked May 29 '19 at 14:01

Active Sep 15 '21 at 16:16

Viewed 72 times

I have two different layouts in CSS. One is for mobile (and other narrower screens) and the second one is for desktop. Width of the layout depends on screen width.

/* mobile */
@media (max-width: 25rem) {
    .foo {
        font-size: 1rem;
        color: red;
    }
}

/* desktop */
@media (min-width: 25rem) {
.foo {
        font-size: 2rem;
    }
}

I don't want to reset things that are set in the “mobile” part in the “desktop” part because they are quite different.

When the screen width is exactly 25rem both layouts are applied. How can I prevent this situation?

edited Sep 15 '21 at 16:16

TylerH

20,799
66
75
101

asked May 29 '19 at 14:01

jiwopene

3,077
17
30

You can try `@media (min-width: 25.1rem)` Or technically speaking, you dont need a media query for mobile. Just for the desktop. – Jones Joseph May 29 '19 at 14:18
@JonesJoseph I know one media query is enough but there is quite a lot of code and code that would reset properties set for mobile could be quite long. – jiwopene May 29 '19 at 14:48
@JonesJoseph And what if user has screen width between 25rem and 25.1rem (not inclusive). – jiwopene May 29 '19 at 14:49
Well you are right but i wonder if such a rare case scenario will occur – Jones Joseph May 29 '19 at 14:53
[This might help](https://stackoverflow.com/a/13611538/4759033) – Satej S May 29 '19 at 14:58
So I have to set all values from “mobile” back in the “desktop” media? There is really no other option? – jiwopene May 29 '19 at 15:11

Select one of two layouts depending on screen width

0 Answers0