CSS taşmalar nasıl engellenir?

ErrorCorrection · 4 Mart 2023

Böyle iken sorun yok.

Ama sayfayı küçültünce sorun oluyor. Nasıl düzeltebilirim?

300319 · 4 Mart 2023

Alttaki kırmızı butonun genişliğini piksel olarak verdiğiniz için o piksel üzerinden devam ediyor. Onun yerine % olarak verirseniz kapsayıcı ile kendini ona göre boyutlandırır.

Veya;

CSS:

@media (max-width: 10px){

}

Bu şekilde belli bir çözünürlükte şekil değiştirebilirsiniz.

oynozan · 4 Mart 2023

Önce o container'ın box-sizing'inin border-box olduğundan emin ol. Daha sonra hangi sayfa genişliğinden sonra buton taşmaya başlıyorsa, o genişlikten itibaren butona sabit bir genişlik atamak yerine yüzdeli bir değer ata.

CSS:

@media only screen and (max-width: 768px) { /* Hangi genişlikten itibaren taşıyorsa o değeri gir */
    button {
        width: 100%;
    }
    
    /* Butonun ortalanması için --> */
    .container {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
}

ErrorCorrection · 4 Mart 2023

300319 dedi:
Alttaki kırmızı butonun genişliğini piksel olarak verdiğiniz için o piksel üzerinden devam ediyor. Onun yerine % olarak verirseniz kapsayıcı ile kendini ona göre boyutlandırır.

Veya;

CSS:

@media (max-width: 10px){ }

Bu şekilde belli bir çözünürlükte şekil değiştirebilirsiniz.

Hocam değişmedi maalesef. Yani değştide sorun devam ediyor.

oynozan dedi:
Önce o container'ın box-sizing'inin border-box olduğundan emin ol. Daha sonra hangi sayfa genişliğinden sonra buton taşmaya başlıyorsa, o genişlikten itibaren butona sabit bir genişlik atamak yerine yüzdeli bir değer ata.

CSS:

@media only screen and (max-width: 768px) { /* Hangi genişlikten itibaren taşıyorsa o değeri gir */ button { width: 100%; } /* Butonun ortalanması için --> */ .container { display: flex; align-items: center; flex-direction: column; } }

Hocam @media only screen nedir?
Ben daha beginner'ım da

oynozan · 4 Mart 2023

ErrorCorrection dedi:
Hocam @media only screen nedir?
Ben daha beginner'ım da

Mesela benim ekranım 1920px diyelim, eğer ziyaret ettiğim siteyi telefonda açmak istesem ekranım 400px olacak. Doğal olarak sitede de bozulmalar olacak. Bu bozulmaları engellemek için CSS'te farklı ekran boyutları için farklı stil ayarlaması yapmanıza olanak veren Media Query'ler vardır. Media Query'lerin kullanımı için W3C'ye bakabilirsiniz. Sitenizin hangi pixelden itibaren bozulduğunu anlamak için Chrome Dev Tools'tan yararlanabilirsiniz.

Sağ taraftaki telefon ikonuna tıkladığınızda ekran boyutuyla oynayabiliyorsunuz. Yukarıda da ekran boyutunun kaç pixel olduğunu gösteriyor.

ErrorCorrection · 4 Mart 2023

oynozan dedi:
Mesela benim ekranım 1920px diyelim, eğer ziyaret ettiğim siteyi telefonda açmak istesem ekranım 400px olacak. Doğal olarak sitede de bozulmalar olacak. Bu bozulmaları engellemek için CSS'te farklı ekran boyutları için farklı stil ayarlaması yapmanıza olanak veren Media Query'ler vardır. Media Query'lerin kullanımı için W3C'ye bakabilirsiniz. Sitenizin hangi pixelden itibaren bozulduğunu anlamak için Chrome Dev Tools'tan yararlanabilirsiniz.

Eki Görüntüle 1689077

Sağ taraftaki telefon ikonuna tıkladığınızda ekran boyutuyla oynayabiliyorsunuz. Yukarıda da ekran boyutunun kaç pixel olduğunu gösteriyor.

Bunun gibi mi hocam

oynozan · 4 Mart 2023

ErrorCorrection dedi:
Bunun gibi mi hocam

Eki Görüntüle 1689078

Eki Görüntüle 1689079

Evet hocam aynen öyle.

ErrorCorrection · 4 Mart 2023

oynozan dedi:
Evet hocam aynen öyle.

Bugün nerdeyse 3 sitede aynısı görmüştüm ama nasıl olduğunu araştırmama rağmen bulamamıştım. Çok iyi denk geldi. Teşekkürler hocam

CSS taşmalar nasıl engellenir?

Ayrıntılı düzenleme

ErrorCorrection

Hectopat

300319

Zettapat

oynozan

Megapat

ErrorCorrection

Hectopat

oynozan

Megapat

ErrorCorrection

Hectopat

oynozan

Megapat

ErrorCorrection

Hectopat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz