Squarespace: 3 kardeş unsuru her zaman aynı yüksekliğe sahip ve duyarlı bir tasarım sağlayın

Question

Şu an bir süredir ön uç web geliştirmeyi öğretiyorum ve şimdiye kadar başarılı bir şekilde birçok müşteri projesini üstlendim. Şu anda www.thrivetech.com sitesinde çalışıyorum ve bir sorun yaşıyorum. Orada bu sitenin ana sayfasında her yukarıdaki görüntülerle 3 metin sütunları, ve ben hepsini aynı yüksekliğe kalmak yapmak için iyi bir yol ile gelip olamaz. Farklı ekran genişliklerinde bu 3 sütun yüksekliği değiştirir ve bazen eşleşmez. Squarespace nesneleri, doğal olarak duyarlı ve ekran yeterince küçüldüğünde, bu 3 sütun birbirinden istiflenir ve iyi görünür. Arka plan renklerini, metin renklerini vb. Değiştirmek için birçok Özel CSS ekledim, ancak bu işi nasıl yapacağımı anlayamıyorum. TÜM CSS'leri kaldırsam ve siyah metin içeren sade bir beyaz sayfaya sahip olsa bile, bu sütunlar hala bunu yapar ve aynı yükseklikte kalmaz. Squarespace desteğiyle bile bağlantı kurdum ve bir çözüm bulmuyorlar.

Bazı CSS kaynağını içerir, ancak thrivetech.com de siteye gitmek ve ne olup bittiğini görmek için CSS incelemek için en iyisi: aşağıdaki resme bakın. Bunların 3'ünün yüksekliğini elde etmek için JS ve jQuery'yi kullanmak gibi bir şey yapmayı düşünmekteyim, hangisinin en büyük olduğunu belirleyin, sonra 3'ün yüksekliğini en yüksek boyuta ayarlayın, ancak daha kolay, daha zarif olmalı saf CSS çözümü? Baktığın için teşekkürler!

Answer 1

çözüldü:

I ekrana bu 3 sütun üst elemanını ayarlamak için bir medya sorgusu kullanarak sorunu sabit: esnek; pencere en az 640 piksel genişliğinde olduğunda. Medya sorgusuna ihtiyacımın nedeni, pencerenin küçüldüğü zaman blok olarak görüntülenmesi gerektiğinden, Squarespace'in doğal duyarlı tasarımından yararlanabilmemiz ve böylece sütunların mobil ve daha küçük ekranlarda birbiri üstüne yığılması gerekir. İşte bazı basit sözdizim kodu:

@media only screen and (min-width: 640px) { 
    #parentDiv { display: flex; } 
}