mobil uyumluluk için padding ayarı nasıl yapılır?

Soru

WordPress hakkımızda ve iletişim sayfalarında mobilde görüntülendiği zaman değişik boşluklar oluşuyor ve güzel görünmüyor. Tarayıcıda güzel görünüyor. WordPress temasının yapısında css değişikliğini ne kadar değiştirdiysem bir türlü yapamadım. Yardımcı olursanız sevinirim.

WordPress boşluk alanlarının mobile uygun (yani alanların telefonlarda farklı olmasını istiyorum) hale getirmek istiyorum.

Css kodum şekildedir. Hakkımızda ve İletişim sayfası için;

.alt_alan {
padding-left: 20%;
padding-right: 20%;
}

.hakkimda {
padding-left: 14%;
padding-right: 14%;
}

Bu kodlar normal tarayıcıda gayet güzel fakat telefonda veya tablette açtığım zaman boşluklar değişiyor ve sayfa yapısıda güzel durmuyor.

Yukarıdaki CSS kodunu düzenleyerek bunu yapmam mümkünmüdür? Yoksa başka bir yöntem var mıdır? Web sayfası yapısının bazı alanlarını responsive değişiklerini değiştirmek mümkünmüdür?

Şimdiden teşekkürler.

Denizden 2019-05-12T21:39:11+03:00 2 CVP 537 Okuma
-1

CVP ( 2 )

  1. BarisUcar
    4
    2019-05-12T22:14:43+03:00
    Cevap

    CSS’de kesme noktaları eklemek için @media sorgularını kullanman yardımcı olabilir.

    Mobil cihazlara yönelik css uygulamak için @media sorguları kullanılır. Anladığım kadar sorguları kullanmamışsın. Aşağıda verdiğim kodları yardımcı olabilir.

    Bu kodları belirtmiş olduğun CSS stil dosyası içindeki kodların altına yapıştır ve o şekilde dene;

    @media only screen and (max-width: 950px) {
    .alt_alan {
    padding-left: 10%;
    padding-right: 10%;
    }
    }

    @media only screen and (max-width: 600px) {
    .alt_alan {
    padding-left: 0;
    padding-right: 0;
    }
    }

    Not: Burdaki kodun anlamı, maksimum genişlikte olan 950px ve 600px’lik ekranlara göre ayarla demektir, yani en fazla bu boyutlara kadar olan ekranlarda css kodunu bu şekilde göster diyorsun.

    umarım yardımcı olur.

    En iyi cevap

Cevap Yaz