Bu CSS kodundaki hata nerede ki bu bozulma oluyor?

Question

Forumdan bir arkadaş sağolsun, sitemizin mobil görünümünde kullanabileceğimiz bir kod vermişti, Mobilden giren kullanıcılara whatsapp ve arama barı gösteren bir kod. Bu koda  @media only screen and (max-width: 750px) { ekledik ama bundan sonra bozulmalar oldu, kodun tamamını da paylaşıyorum.

/* MOBİL BAR */

@media only screen and (max-width: 750px) {
    
.mobilbararkaplan {
    width: 100%;
    position:fixed;
    bottom:0;
    height: 50px;
    z-index:9999;!
}

.mobilbararkaplan a {
    color:white;
    text-decoration:none;
}

.mobilbarwhatsapp, .mobilbarhemenara{
    width: 50%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.mobilbarwhatsapp i, .mobilbarhemenara i{
    margin-right: 10px;
}

.mobilbarwhatsapp {
    float:left;
    background:#189e0e;
}

.mobilbarhemenara {
    float:right;
    background:#0f2b65;
}
     }
/* MOBİL BAR SON */
@media only screen and (min-width: 767px) {
.mobilbararkaplan {
 display:none;
}

h1.acontact__img--text__backtitle {
    display: none;
}

salimsevindik · Accepted Answer

.mobilbararkaplan {
display:none;
}

@media only screen and (max-width: 750px){ 
.mobilbararkaplan {
display:block;
}
}

umityildrim · Answer

Media etiketinin kapama parantezi eksik. Onun dışında da bir hata olabilir tabi. En aşağı kıvırcık parantez ekleyelim.
						Erc_Orc adlı üyeden alıntı:						mesajı görüntüle									Hocam kodun sonunda 2 tane }} var 3.yü mü ekleyeyim  		Hmm onu eklemişsiniz tamam o zman. &#128578;&#128077; Hata devam ediyorsa yukarıda en üstlerde bir tane ünlem işarwti gördüm. Ondan da olabilir. &#128077; Bir de body kısmının sınırını da belirtmek gerekir. Media etiketinin içine olacak şekilde ve en üste şu kodları ekleyin:

body {
width: 100vw;
height: 100vh;
}

Erc_Orc · Answer

istanbulum adlı üyeden alıntı:						mesajı görüntüle									Hocam masaüstündeki sorun devam ediyorsa (masaüstü kodlarının içine gelecek şekilde) şu kodları bir deneyelim:

body {
width: 100vw;
height: 100vh;
} 		Çözüldü hocam çok teşekkür ederim.

istanbulum · Answer

Hocam masaüstündeki sorun devam ediyorsa (masaüstü kodlarının içine gelecek şekilde) şu kodları bir deneyelim:

body {
width: 100vw;
height: 100vh;
}

Erc_Orc · Answer

salimsevindik adlı üyeden alıntı:						mesajı görüntüle									.mobilbararkaplan {
display:none;
}

@media only screen and (max-width: 750px){
.mobilbararkaplan {
display:block;
}
} 		
Sorun tamamen çözüldü hocam, her şey için çok teşekkür ederim. Grafik tasarım ile ilgili bir ihtiyacınız olduğunda yardımcı olmak isterim.

Erc_Orc · Answer

Mobilde sorun çözüldü herkese çok teşekkür ederim, @Gunesibrahim; @Spremancy; @MrHyp3R; @salimsevindik; @umityildrim; sadece masaüstünde böyle bir sorunumuz var artık

salimsevindik · Answer

Erc_Orc adlı üyeden alıntı:						mesajı görüntüle									Hemen deniyorum hocam @salimsevindik; hocam ekledim ama yine aynı. Site 		Sonradan eklediğiniz css kodlarda hata var.

.mobilbararkaplan {
    width: 100%;
    position:fixed;
    bottom:0;
    height: 50px;
    z-index:9999;!
}

z-index 'in sonunda ünlem işareti var. Öncelikle bun düzeltip bir kontrol ediniz.

Erc_Orc · Answer

umityildrim adlı üyeden alıntı:						mesajı görüntüle									Media etiketinin kapama parantezi eksik. Onun dışında da bir hata olabilir tabi. En aşağı kıvırcık parantez ekleyelim. 		Hocam kodun sonunda 2 tane }} var 3.yü mü ekleyeyim

Erc_Orc · Answer

Gunesibrahim adlı üyeden alıntı:						mesajı görüntüle									Hocam sizde cacheden kaynaklı bozulma görünüyor. Site gayet düzgün şuan 								Spremancy adlı üyeden alıntı:						mesajı görüntüle									Farklı bir program ile kontrol ettiğimde belirtmiş olduğunuz çözünürlükte sorun gözükmemekte hocam.

bknz : https://prnt.sc/AwzTYGsQFFVr 		Çok teşekkür ederim, android cihazdan deniyorum bozulma görünüyor ama şimdi tarayıcı sıfırlayıp deneyeceğim.

Spremancy · Answer

Farklı bir program ile kontrol ettiğimde belirtmiş olduğunuz çözünürlükte sorun gözükmemekte hocam.

bknz : https://prnt.sc/AwzTYGsQFFVr

Gunesibrahim · Answer

Hocam sizde cacheden kaynaklı bozulma görünüyor. Site gayet düzgün şuan

Erc_Orc · Answer

Misafir adlı üyeden alıntı: mesajı görüntüle

kodunuzun tamamını görebilirsem daha iyi yardımcı olabilirim. bu kodu deneyebilir misiniz?

/* MOBİL BAR */
@media only screen and (max-width: 750px) {
    
.mobilbararkaplan {
    width: 100%;
    position:fixed;
    bottom:0;
    height: 50px;
    z-index:9999;!
}

.mobilbararkaplan a {
    color:white;
    text-decoration:none;
}
    

.mobilbarwhatsapp, .mobilbarhemenara{
    width: 50%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}
    

.mobilbarwhatsapp i, .mobilbarhemenara i{
    margin-right: 10px;
}
    

.mobilbarwhatsapp {
    float:left;
    background:#189e0e;
}
    

.mobilbarhemenara {
    float:right;
    background:#0f2b65;
}
     }
/* MOBİL BAR SON */
@media only screen and (min-width: 767px) {
.mobilbararkaplan {
 display:none;
}

    
    h1.acontact__img--text__backtitle {
    display: none;
    }}

mevcut kod bu hocam

<div class="mobilbararkaplan">
    <a rel="nofollow" href="https://wa.me/905426142929">
    <div class="mobilbarwhatsapp">
        <i class="fab fa-whatsapp"></i>WhatsApp
    </div>
    </a>
    <a href="tel:+902642910060">
    <div class="mobilbarhemenara">
        <i class="fas fa-phone"></i>Hemen Ara
    </div>
    </a>
</div>

Hemen Ara

MrHyp3R · Answer

Erc_Orc adlı üyeden alıntı:						mesajı görüntüle									Anlamadım hocam 		kodunuzun tamamını görebilirsem daha iyi yardımcı olabilirim. bu kodu deneyebilir misiniz?
/* MOBİL BAR */
 
@media only screen and (max-width: 750px) {
     
.mobilbararkaplan {
    width: 100%;
    position:fixed;
    left:0;
    bottom:0;
    height: 50px;
    z-index:9999!important;
}
 
.mobilbararkaplan a {
    color:white;
    text-decoration:none;
}

.mobilbarwhatsapp, .mobilbarhemenara{
    width: 50%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.mobilbarwhatsapp i, .mobilbarhemenara i{
    margin-right: 10px;
}

.mobilbarwhatsapp {
    float:left;
    background:#189e0e;
}

.mobilbarhemenara {
    float:right;
    background:#0f2b65;
}
     }
/* MOBİL BAR SON */
@media only screen and (min-width: 767px) {
.mobilbararkaplan {
 display:none;
}

h1.acontact__img--text__backtitle {
    display: none;
}
}

Erc_Orc · Answer

Misafir adlı üyeden alıntı:						mesajı görüntüle									bozulmadan dolayı düzenleme 		Anlamadım hocam

MrHyp3R · Answer

bozulmadan dolayı düzenleme

Erc_Orc · Answer

salimsevindik adlı üyeden alıntı:						mesajı görüntüle									En sona bir süslü parantez daha ekleyiniz. 		Hemen deniyorum hocam @salimsevindik; hocam ekledim ama yine aynı. Site

salimsevindik · Answer

En sona bir süslü parantez daha ekleyiniz.