CSS Responsive Tasarımda ekran 882 pikselden büyük olunca menüler karışıyor

Endersqui · 12 Temmuz 2024

Merhaba CSS ile responsive tasarım yaparken eklediğim kodları yazdım. Ama ekran 882px'den büyük olunca header bölümündeki menüler resimdeki gibi karışıyor. Fakat bilgisayarımın kendi genişliğinde (1366px) bir sorun olmuyor. Amacım ekran ne kadar büyürse veya küçülürse küçülsün hiçbir sorun çıkarmaması yardımcı olur musunuz?

Resimin linki:

https://r.resimlink.com/pHKNAqD.png

CSS:

@media (max-width:991){
    html{
        font-size: 55%;
    }

    .header{
        padding: 1.5rem 2rem;
    }

    .header .logo img{
        height: 7rem;
    }

    section{
        padding: 2rem;
    }

    .projects .box-container .box .box-head .name{
        font-size: 3.4rem;
    }
}

@media (max-width:882px){
    #header-btn{
        display: inline-block;
    }

    .header .navbar{
        position: absolute;
        top: 95%;
        background-color: #fff;
        height: calc(100vh - 9rem);
        width: 30rem;
        box-shadow: 0px 20px 14px 0px rgba(0 0 0 / 75%);
        right: -100%;
    }

    .header .navbar.active{
        right: 3rem;
    }

    .header .navbar a{
        color: black;
        display: block;
        margin: 1.5rem;
        padding: 0.5rem;
        font-size: 2rem;
    }
}

CSS Responsive Tasarımda ekran 882 pikselden büyük olunca menüler karışıyor

Endersqui

Centipat