Mobil üzerinden text logo düzeltilmesi

Merhaba arkadaşlar,

Bir sitemiz var http://kadinlarplajiservisi.com/ diye ve anasayfada üstte çok güzel ve fit duran text logo yazısı yani menünün solundaki,telefondan siteye girince menü arkaplanından taşıyor ve kötü bir görüntüye sebebiyet veriyor.Şöyle oluyor:


Yani ya mobilde bu text logonun size'ı küçülecek,ya da o arka plandaki menünün beyaz arkaplanının pixeli genişleyecek ben uğraştım ama yapamadım acaba bu konuda tavsiyesi olan yardımcı olacak arkadaşlar var mı?

Öncelikle satır içi eklediğiniz text logo stillerini, css dosyasına ekleyin.

.site-logo a span {...} şeklinde.

Text logonun bozulduğu çözünürlük 600px olarak görünüyor. Bu yüzden 600px için min ve max media query tanımlayıp, 600px den büyük ekran boyutu için mevcut text logo css kodlarını kullanıp, 600px düşük ekran boyutu için de aynı class ismi için font size küçülterek tanımlama yaparsanız sorununuz çözülür.

@media only screen and (min-width: 600px) {
    .site-logo a span {
       /** ilgili css kodları **/
    }
}

@media only screen and (max-width: 600px) {
    .site-logo a span {
       /** ilgili css kodları **/
    }
}

Hocam geç oldu ama cevabınız için teşekkür ederim.Fakat custom.css dosyasına şöyle ekleme yaptığımda sorunu hala çözemiyorum:

@media only screen and (min-width: 600px) {
    .site-logo a span {
       font-size: 8px;
    }
}
 
@media only screen and (max-width: 600px) {
    .site-logo a span {
       font-size: 8px;
    }
}

Sizin dediğiniz satır içi text logo stilleriyle mi alakalı acaba onu bulamadım böyle doldurdum ama olmadı,o satır için text logo stilini nereden bulabilirim? Tekrar teşekkür ediyorum