media screen does not change font-size CSS

Question

So I have some problem, if browser is full screen everything display correct, and when I change the size of browser my #table112 does not change it font-size, but it should change it according to logic. So where did I make mistake

#table112 {
    display: flex;
    font-size: 14px;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem;
}


@media screen and (min-width: 600px) {
    #table112 {
        font-size: 12px;
    }
}

@media screen and (max-width: 900px) {
    #table112 {
        font-size: 12px;
    }
}

score 1 · Answer 1 · answered Jan 12 '22 at 09:03

You have to replace min-width and max-width.

@media screen and (max-width: 600px) {
    #table112 {
        font-size: 12px;
    }
}

@media screen and (min-width: 900px) {
    #table112 {
        font-size: 12px;
    }
}

To understand how these properties work in @media, read this.

Sercan · Accepted Answer · 2022-01-12T09:10:46.880

Use both min-width and max-width in intermediate values to apply styles based on field widths when using a media query. Only min-width is used for the largest screen width and max-widht is used for the smallest screen width.

#table112 {
    display: flex;
    font-size: 75px;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem;
}
@media screen and (min-width: 1024px){
    #table112 {
        font-size: 75px;
    }
}
@media screen and (min-width: 900px) and (max-width: 1023px) {
    #table112 {
        font-size: 50px;
    }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
    #table112 {
        font-size: 25px;
    }
}
@media screen and (max-width: 599px) {
    #table112 {
        font-size: 10px;
    }
}

<p id="table112">TEST</p>

media screen does not change font-size CSS

2 Answers2