[Bug] 미디어 쿼리 적용이 안되는 문제

[kimseungdeok]

Summary

미디어 쿼리가 적용이 안되는 문제 발생

미디어 쿼리 코드

/* page 3 solution */

@media screen and (min-width : 768px) and (max-width : 2560px){
    #section2 .container {
        background-color: #FAFBFD;
    }

    .solution-area {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }
    .as-is-area{
        padding-right: 6.875rem;
        text-align: center;
        align-items: center;
    }
    .as-is {
        width: var(--sol-item-width);
        height: var(--sol-item-height);
        background-color: lightgray;
        border-radius: 1.875rem;
        text-align: center;
        justify-content: center;
        line-height: var(--sol-item-height);
        color: black;
        font-weight: bold;
        margin-left: calc(var(--sol-item-width) /2);
    }
    .as-is-explanation-set {
        /* padding-top: 6.75rem; */
        display: flex;
        flex-direction: column;
        font-weight: bold;
        width: 25.313rem;
        height: 22.813rem;
        justify-content: space-around;
    }
    .as-is-explanation {
        /* padding-top: 4.688rem; */
    }
    .arrow {
        /* padding-top: 21.5%; */
    }
    .arrow-item {
        font-weight: bold;
    }
    .to-be-area{
        padding-left: 6.875rem;
        text-align: center;
    }
    .to-be {
        /* 
            --sol-item-width : 12.5rem;
            --sol-item-height : 3.125rem;
        */
        width: var(--sol-item-width); 
        height: var(--sol-item-height);
        border-radius: 1.875rem;
        text-align: center;
        justify-content: center;
        line-height: var(--sol-item-height);
        color: white; 
        font-weight: bold;
        margin-left:calc(var(--sol-item-width) /2);
    }
    .to-be-explanation-set {
        /* padding-top: 6.75rem; */
        display: flex;
        flex-direction: column;
        font-weight: bold;
        width: 25.313rem;
        height: 22.813rem;
        justify-content: space-around;
    }
    .to-be-explanation {
        /* padding-top: 4.688rem; */
    }
}

@media screen and (min-width : 598px) and (max-width : 767px){

}
@media screen and (max-width: 597px) {
    

    #section2 > .container > .title h3{
        font-size: 4.125rem;
        font-weight: bold;
        padding-bottom: 100px;
    }
    .solution-area {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }
    .as-is-area {
        padding-right: 0;
        
    }
    .as-is-explanation-set {
        width: 32.313rem;
        /* font-size: 20px; */
    }
    .to-be-area {
        padding-left: 0;
    }
    .arrow-item {
        transform: rotate(90deg);
        padding: 100px;
    }

    .as-is {
        margin-left:9rem;
        font-size: 25px;
    }
    .to-be {
        font-size: 25px;
    }
    .as-is-explanation-set {
        font-size: 20px;
    }
}

미디어 쿼리 분기점을 지켜 작성을 하였지만 크기를 줄였을때 코드가 적용이 되지 않는것을 확인할 수 있다.