Çözüldü Birden fazla @media etiketi olduğundan CSS sorun yaratıyor

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

k1ttywnn

Decapat
Katılım
19 Ağustos 2023
Mesajlar
150
Makaleler
1
Çözümler
4
Daha fazla  
Cinsiyet
Kadın
CSS:
@media (max-width: 670px) and (min-height: 370px) {

 .Coin,
 .Kazanc,
 .Market {
 top: 0px;
 z-index: 2;
 width: 80px;
 height: 40px;
 }

 .bilgi-area {
 margin-right: -72px;
 margin-bottom: -50px;
 }

 #Tek,
 #Yardımlı,
 #Katlamalı,
 #El-Sayısı {
 width: 83px;
 height: 30px;
 font-size: 10px;
 }

 .tas-area {
 margin-top: -65px;
 margin-right: 46px;
 }

 .Main-Area {
 width: 450px;
 height: 216.5px;
 margin-left: -35px;
 }

 .A-Main {
 width: 32px;
 height: 35px;
 display: flex;
 position: fixed;
 margin: -14.95px -15px;

 }

 .A-Main img {
 width: 100%;
 height: 100%;
 }

 #gosterge {
 background-color: black;
 width: 85px;
 height: 20px;
 position: fixed;
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 font-size: 20px;
 margin-left: 72px;
 margin-top: -2px;
 font-size: 16px;
 }

 .ALL-AREA {
 height: 120px;
 width: 530px;
 }

 .TileArea {
 display: flex;
 width: 15px;
 height: 19px;
 }

 .area1 {
 margin: 30px 72.5px 84px;
 }

 .Tile,
 .Tile2 {
 display: flex;
 width: 375px;
 height: 40px;
 }

 .tas-isle {
 width: 60px;
 height: 30px;
 margin-left: 337px;
 margin-top: -7px;
 }

 .elini-ac {
 width: 60px;
 height: 30px;
 margin-left: 399.99px;
 margin-top: -7px;
 }

 .seridiz {
 width: 30px;
 height: 80px;
 margin-left: 21px;
 margin-top: 29px;
 }

 .ciftdiz {
 width: 30px;
 height: 80px;
 margin-left: 472px;
 margin-top: 29px;
 }

 #TTEXTT {
 font-size: 17px;
 }
}
/* Samsung Galaxy S8+ */
@media (max-width: 741px) and (min-height: 359px) {

 .Coin,
 .Kazanc,
 .Market {
 top: 0px;
 z-index: 2;
 width: 80px;
 height: 40px;
 }

 .bilgi-area {
 margin-right: -32px;
 margin-bottom: -54px;
 }

 #Tek,
 #Yardımlı,
 #Katlamalı,
 #El-Sayısı {
 width: 83px;
 height: 30px;
 font-size: 10px;
 }

 .tas-area {
 margin-top: -62px;
 margin-right: 86px;
 }

 .Main-Area {
 width: 450px;
 height: 216.5px;
 margin-left: -35px;
 }

 .A-Main {
 width: 32px;
 height: 35px;
 display: flex;
 position: fixed;
 margin: -14.95px -15px;

 }

 .A-Main img {
 width: 100%;
 height: 100%;
 }

 #gosterge {
 background-color: black;
 width: 85px;
 height: 18px;
 position: fixed;
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 font-size: 20px;
 margin-left: 52px;
 font-size: 16px;
 }

 .ALL-AREA {
 height: 120px;
 width: 530px;
 }

 .TileArea {
 display: flex;
 width: 25px;
 height: 19px;
 }

 .area1 {
 margin: 30px 53px 84px;
 }

 .Tile,
 .Tile2 {
 display: flex;
 width: 415px;
 height: 40px;
 }

 .tas-isle {
 width: 50px;
 height: 20px;
 margin-left: 357px;
 margin-top: 7px;
 }

 .elini-ac {
 width: 50px;
 height: 20px;
 margin-left: 420.99px;
 margin-top: 7px;
 }
 .elini-ac #TTEXTT,
 .tas-isle #TTEXTT {
 font-size: 12px;
 color: rgb(255, 255, 255);
 z-index: 5;
 }

 .seridiz {
 width: 30px;
 height: 80px;
 margin-left: -4px;
 margin-top: 29px;
 }

 .ciftdiz {
 width: 30px;
 height: 80px;
 margin-left: 495px;
 margin-top: 29px;
 }

 #TTEXTT {
 font-size: 17px;
 }
}

Kod dosyasının belirli yerinden kesit alıp attım iki Media etiketi birbirlerinin içerisine giriyor Samsung galaxys8+nun Media'sı iPhone 6S in medyasını da kapsıyor sorunu çözemiyorum.
 
Son düzenleyen: Moderatör:
Çözüm
Çözümü kendi kendime buldum Height ve Width'leri Min ve Max olarak 2 defa yazıyoruz yani örneğin;
@media onlyscreen and (max-width: 200px) and (min-width: 180px) and (max-height: 500px) and (min-height: 480px)
Ya da;
@media (max-width: 200px) and (min-width: 180px) and (max-height: 500px) and (min-height: 480px)
Şeklinde yapılabiliyor böylelikle Media'lar birbirleri ile karışmıyor.
Teşekkürler.
Çözümü kendi kendime buldum Height ve Width'leri Min ve Max olarak 2 defa yazıyoruz yani örneğin;
@media onlyscreen and (max-width: 200px) and (min-width: 180px) and (max-height: 500px) and (min-height: 480px)
Ya da;
@media (max-width: 200px) and (min-width: 180px) and (max-height: 500px) and (min-height: 480px)
Şeklinde yapılabiliyor böylelikle Media'lar birbirleri ile karışmıyor.
Teşekkürler.
 
Çözüm

Technopat Haberler

Geri
Yukarı