Everything else works in my media query code: changing the font color, repositioning elements on the screen etc.. But changing font-size never works.

The code looks like this (note that font-size is within the div without a name:

.sidebar {
    position: fixed;
    background-color: white;
    left: 0;
    bottom: 0;
    top: 57px;
    width: 72px;
    z-index: 200;
    padding-top: 4px;

    .sidebar-link {
        height: 74px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        cursor: pointer;


        img {
            height: 24px;
            margin-bottom: 6px;

        }

        div {
            font-size: 10px;

        }

        &:hover {
            background-color: #eeeeee;

        }
    }
}

And like this:

    @media (min-width: 1200px) {
        .sidebar {
            width: 250px;

            .sidebar-link {
            flex-direction: row;
            justify-content: left;
            margin-left: 22px;
            }

            div {
                font-size: 16px;

            }
        } 
    }

CodePudding user response：

In the media query div is defined as a class and not as an element.

        .div {
            font-size: 16px;

        }

change in

        div {
            font-size: 16px;

        }

CodePudding user response：

The first section of CSS you posted sets .sidebar .sidebar-link div to 10px. But then your media query sets .sidebar div to 16px. I think this is probably a mistake rather than what you intended to write. The reason the media query isn't changing the size is that .sidebar div is a less specific selector than .sidebar .sidebar-link div. If you change the code in your media query to target .sidebar .sidebar-link div, it should work.