Çözüldü @media CSS'leri çalışmıyor

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.

Atakan D.

Kilopat
Katılım
6 Temmuz 2013
Mesajlar
1.742
Makaleler
1
Çözümler
3
Daha fazla  
Cinsiyet
Erkek
Arkadaşlar yaptığım örnek site için responsive kısmını halledeyim dedim. !important'ı dahi kullandım. Tarayıcı küçüldüğünde F12 geliştirici kısmından bakıyorum, inherited from html diyor. Bir şeyi unuttum, ya da yanlış yaptım ama fark edemedim. Zamanı olan biri bakarsa çok sevinirim, başımı ağrıttı şu olay.



CSS:
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;

}

a {
    text-decoration: none;
    color: black;
}


html {
    font-size: 10px;
}

body {

    line-height: 1.5;
}

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: .5rem;
    padding-right: .5rem;
}

@media only screen and (min-width: 576px) {

    .container {
        max-width: 540px;
    }

    html {
        font-size: 7px;
    }



}

@media only screen and (min-width: 768px) {
    .container {
        max-width: 720px;
    }

    html {
        font-size: 8px;
    }

    .prg {
        width: 15%;
    }


}

@media only screen and (min-width: 992px) {
    .container {
        max-width: 960px;
    }

    html {
        font-size: 9px;
    }

    .prg {
        width: 16%;
    }


}

@media only screen and (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }

    html {
        font-size: 10px;
    }


}

2.JPG


Hiçbir breakpoint'te bu font-size'lar ve (sonradan denediğim) width değerleri etkili olmuyor. İşaretlediğim gibi inherited from html yazıyor. Kod sıralamasında mı yanlış var anlamadım.
 
Son düzenleyen: Moderatör:
Çözüm
Aklıma şimdi geldi de, acaba @media'daki CSS'leri yazdığımız için normal (@media'sız) olan alakalı CSS'i silmek mi gerekiyor?. Çünkü tüm media CSS'leri, ezildiği için hiçbir çözünürlükte çalışmıyor.

Düzenleme: Özel CSS'leri silip sadece @media'daki CSS'leri tutarak sorunu çözdüm. En basit şey aklıma gelmedi 3 gündür bununla uğraşıyordum...
media içeren CSS'ler normal CSS'ten üst satırlarda kalıyorsa "!important" kullanmanız gerekiyor. Ancak bunun yerine media içeren CSS'leri alt satırlara almanızı öneririm. Orijinal satırından alt satırda bulunması gerekiyor.

Sorun çözüldü mü?
 
Son düzenleme:
Aklıma şimdi geldi de, acaba @media'daki CSS'leri yazdığımız için normal (@media'sız) olan alakalı CSS'i silmek mi gerekiyor?. Çünkü tüm media CSS'leri, ezildiği için hiçbir çözünürlükte çalışmıyor.

Düzenleme: Özel CSS'leri silip sadece @media'daki CSS'leri tutarak sorunu çözdüm. En basit şey aklıma gelmedi 3 gündür bununla uğraşıyordum...
 
Son düzenleme:
Çözüm
@Atakan D. böyle yapmana gerek yoktu. Dediğim gibi yaptığında kodların çalışacaktı. Yüksek çözünürlükler için media kullanman kod kalabalığı yapar.
Her breakpoint'te ve ayrı ayrı olmak üzere !important kullandım. Bu sefer de sadece ilk media'daki (max-width: 576px) CSS'ler diğer tümünü ezdi. Bir sonraki projemde de dediğin gibi media CSS'lerini en alt satıra yazacağım.
 

Yeni konular

Geri
Yukarı