@Media Query'ler çalışmıyor

E

efehanarslan

Centipat
Katılım
10 Ekim 2021
Mesajlar
23
Çözümler
1
Daha fazla  
Cinsiyet
Erkek
Herkese iyi akşamlar dilerim. Normalde her tasarımımda çalışan Media queryleri maalesef bu kodumda ne yaptıysam çalıştıramadım ve hatamı da bulamıyorum.

CSS: 
<meta content="width=device-width, initial-scale=1" name="viewport" />

Head tagları arasında bu kodum bulunuyor ve CSS dosyasını linklemem düzgün.

CSS: 
/* RESPONSIVE */
@media screen and (max-device-width: 1366px) {

 .secondnav ul {
 margin-left: -75px;
 }
 .secondnav li {
 padding: 0px 40.5px;
 }
 .leftslidebar {
 position: absolute;
 margin-right: 15px;
 }
 .middleslidebar {
 margin-top: 75px;
 width: 790px;
 }
 .middleslidebar li {
 padding: 0 10px;
 margin-left: -5px;
 }
 .content {
 margin-top: 180px;
 position: absolute;
 }
 .footer {
 margin-top: 1700px;
 }
}

CSS dosyamdaki kodlarımın bir kısmı da bu şekilde fakat hiçbir tepkime alamıyorum.
 
Tarihe göre sırala Puana göre sırala
CSS dosyanızda kapamayı unuttuğunuz parantez veya noktalı virgül gibi bir durum olabilir belki. Birkaç kere bende noktalı virgül yüzüne çalışmamıştı.
 
Artı 0 Eksi
Primearc dedi:
Kodunun tamamını atar mısın?
Genişletmek için tıkla...

CSS: 
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');
body {
    margin: 0;
    padding: 0;
    background-color: #0B0C11;

/*Fonts*/

    font-family: 'Segeo UI', sans-serif;
    color: #fff;
}


/*Sayfa Standart Genişlik*/

.container {
    width: 100%;
}

/*Navbar*/

.nav {
    margin-left: 150px;
    margin-top: 25px;
}
.nav .right-nav {
    float: right;
    margin-right: 300px;
    margin-top: -70px;
}

/*Rightnav*/

.right-nav li {
    display: inline-block;
    padding: 0 15px;
    cursor: pointer;
}
.right-nav i {
    font-size: 25px;
    color: #545664;
}
.right-nav button {
    border: none;
    background-color: #D39100;
    border-radius: 10px;
    padding: 10px 15px;
    color: #fff;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    margin-top: -30px;
    position: absolute;
}

/*Dil Dropdown*/
.language-select {
    position: absolute;
    width: 200px;
    height: 75px;
    background: #232530;
    border-radius: 15px;
    margin-left: -120px;
    margin-top: 22px;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transition: all .40s ease-in-out;
}
.language-select.active1{
    visibility: visible;
    opacity: 1;
    transition: all .40s ease-in-out;
}
.language-select ul {
    margin-left: -20px;
    margin-top: 25px;
}
.language-select a:hover {
    background: #D39100;
    border-radius: 3px;
    margin-top: 3px;
}
.icon.rotate {
    transform: rotate(180deg);
}
/*Giriş Dropdowns*/

.dropdown-header {
    position: absolute;
    margin-top: 25px;
    width: 150px;
    height: 100px;
    border-radius: 15px;
    background: #232530;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transition: all .40s ease-in-out;
}
.dropdown-header.active {
    visibility: visible;
    transition: all .40s ease-in-out;
    opacity: 1;
}
.dropdown-header li {
    display: block;
    padding: 15px 0;
    margin-left: 5px;
}
.dropdown-header a {
    color: #fff;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
}
.dropdown-header a:hover{
    color: #D39100;
}
.dropdown-header::before {
    transform: rotate(45deg);
}

/*Çizgi*/

#nav-hr{
    border-color: #282B38;
    margin-left: -200px;
}

/*Secondnav*/

.secondnav ul {
    margin-left: -94px;
    margin-top: 30px;
}
.secondnav li {
    display: inline;
    padding: 0 58.5px;
}
.secondnav a {
    text-decoration: none;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 17px;
    position: relative;
}
.secondnav a:hover {
    color: #D39100;
}
.secondnav a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    bottom: 0;
    left: 0;
    top: 28px;
    background-color: #D39100;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out;
}
.secondnav a:hover:before {
    visibility: visible;
    transform:scaleX(1.0);
}

/*Left Slide Bar*/

.leftslidebar {
    width: 230px;
    height: 400px;
    background: #232530;
    margin-left: 150px;
    margin-top: 70px;
    border-radius: 25px;
}
#escort-header {
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    padding-top: 20px;
    position: relative;
}
#leftslidebar {
    border-color: #434657;
}
.leftslidebar #flag {
    margin-left: 20px;
    margin-top: 15px;
}
.leftslidebar #flag-text {
    font-size: 13px;
    margin-top: 17px;
    margin-left: 15px;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
    position: absolute;
}
.leftslidebar .button {
    height: 20px;
    width: 20px;
    border-radius: 3px;
    background: #545664;
    float: right;
    margin-left: 190px;
    margin-top: -25px;
    position: absolute;
    cursor: pointer;
}
.button .turuncu {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: #D39100;
    margin-left: 4px;
    margin-top: 4px;
}

/*Middleslidebar*/

.middleslidebar {
    width: 1000px;
    height: 60px;
    border-radius: 20px;
    background: #232530;
    float: right;
    margin-top: -400px;
    margin-right: 160px;
}
.middleslidebar li {
    display: inline;
    padding: 0 20px;
}
.middleslidebar a {
    text-decoration: none;
    font-weight: 400;
    font-size: 17px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
}
.content {
    margin-left: 425px;
    margin-top: -300px;
    position: absolute;
}
.box {
    width: 220px;
    height: 455px;
    border-radius: 15px;
    background: #232530;
    margin-bottom: 25px;
    margin-right: 40px;
    font-family: 'Poppins', sans-serif;
    float: left;
}
.name {
    padding-top: 20px;
    text-align: center;
    font-weight: 600;
}
.box img {
    margin-left: 30px;
    margin-top: 15px;
    border-radius: 15px;
}
.desc {
    max-width: 200px;
    text-align: center;
    margin-left: 10px;
    font-weight: 300;
    font-size: 13px;
}
.box button {
    border: none;
    background-color: #D39100;
    border-radius: 3px;
    margin-left: 65px;
    padding: 5px 10px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
}

/*Footer*/

.footer {
    text-align: center;
    margin-top: 750px;
    font-family: 'Poppins', sans-serif;
}
.footer    li {
    list-style: none;
    display: inline-block;
    padding: 0px 15px;
}
.footer    a {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-decoration: none;
    font-size: 18px;
    position: relative;
}
.footer p {
    max-width: 1100px;
    font-weight: 300;
    font-size: 12px;
    text-align: center;
    margin: auto;
    padding: 20px 0px;
}
.footer a:hover {
    color: #D39100;
}
.footer a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    bottom: 0;
    left: 0;
    top: 28px;
    background-color: #D39100;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out;
}
.footer a:hover:before {
    visibility: visible;
    transform:scaleX(1.0);
}

/*                 RESPONSIVE                     */

@media only screen and (max-width: 1366px) {
    .secondnav ul {
        margin-left: -75px;
    }
    .secondnav li {
        padding: 0px 40.5px;
    }
    .leftslidebar {
        position: absolute;
        margin-right: 15px;
    }
    .middleslidebar {
        margin-top: 75px;
        width: 790px;
    }
    .middleslidebar li  {
        padding: 0 10px;
        margin-left: -5px;
    }
    .content {
        margin-top: 180px;
        position: absolute;
    }
    .footer {
        margin-top: 1700px;
    }
}

@media only screen and (max-width: 1024px) {
    .secondnav ul {
        margin-left: -55px;
    }
    .secondnav li {
        padding: 0 25px;
    }
    .secondnav a {
        font-size: 15px;
    }
    .leftslidebar {
        position: absolute;
        margin-left: 105px;
        margin-top:180px;
    }
    .middleslidebar {
        margin-top: 75px;
        width: 810px;
        margin-right:110px;
    }
    .middleslidebar li  {
        padding: 0 15px;
        margin-left: -5px;
    }
    .middleslidebar a {
        font-size: 15px;
    }
    .content {
        margin-top: 180px;
        position: absolute;
    }
    .footer {
        margin-top: 2200px;
    }
    .nav .right-nav {
        margin-right: 250px;
    }
    .nav {
        margin-left: 100px;
    }
}
 
Artı 0 Eksi
İki Media etiketi de birbiriyle çelişiyor hem 1024 piksele kadar bunu yap diyorsun hem de 1366px e kadar bunu yap diyorsun. Örneğin ekran genişliğin 900 px olsun. Birinci Media'yı mı uygulamalı yoksa ikincisini mi? Çünkü her iki koşulda sağlanıyor. Onun yerine ilk Media etiketini şununla değiştir:
@media only screen and (min-width: 1024px)
 
Artı 0 Eksi
Primearc dedi:
İki Media etiketi de birbiriyle çelişiyor hem 1024 piksele kadar bunu yap diyorsun hem de 1366px e kadar bunu yap diyorsun. Örneğin ekran genişliğin 900 px olsun. Birinci Media'yı mı uygulamalı yoksa ikincisini mi? Çünkü her iki koşulda sağlanıyor. Onun yerine ilk Media etiketini şununla değiştir:
@media only screen and (min-width: 1024px)
Genişletmek için tıkla...

Merhaba, dediğinizi daha önceden denedim. Şu an aktif kodlarımda tek sıkıntı Chorme tarayıcısında yaşanıyor. Media taglarım opera ve mozilla tarayıcısında sıkıntısız çalışıyor fakat daha chorme için çözüm bulamadım.
 
Artı 0 Eksi
efehanarslan dedi:
Merhaba, dediğinizi daha önceden denedim. Şu an aktif kodlarımda tek sıkıntı Chorme tarayıcısında yaşanıyor. Media taglarım opera ve mozilla tarayıcısında sıkıntısız çalışıyor fakat daha chorme için çözüm bulamadım.
Genişletmek için tıkla...
1. media etiketi ile 2. media etiketinin yerini altındakilerle beraber değiştirin. Tarayıcıların CSS işleme motorları farklı algoritmalarla çalışabiliyor. Ortada bir çelişki var ve sorunu Chrome'a atıyorsun. Diğer tarayıcıların doğru davranması kodunun doğru olduğu anlamına gelmiyor.
 
Artı 0 Eksi

Benzer konular

Atakan D.
  • Çözüldü
Çözüldü  @media CSS'leri çalışmıyor
Mesaj
5
Görüntüleme
3B
Atakan D.
Atakan D.
S
  • Soru
CSS Media Queries Mobil Ekranda Çalışmıyor
Mesaj
3
Görüntüleme
484
smyutku
S
Berat.xx56
  • Çözüldü
Çözüldü  HTML <link> etiketinde Media parametresi kullanma
Mesaj
2
Görüntüleme
233
Berat.xx56
Berat.xx56
Merdione
Fontawesome çalışmıyor
Mesaj
2
Görüntüleme
147
Rufiq Cavadov
R
E
  • Soru
PHPMailer çalışmıyor
Mesaj
0
Görüntüleme
138
ETReVeNGe
E

Yeni konular

Yeni mesajlar

Geri
Yukarı