Endersqui
Centipat
- Katılım
- 19 Eylül 2023
- Mesajlar
- 102
Daha fazla
- Cinsiyet
- Erkek
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:
Resimin linki:
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;
}
}
