Squarespace: 3 Geschwisterelemente haben immer die gleiche Höhe und Responsive Design beibehalten

Question

Ich habe mich schon eine Weile mit der Entwicklung von Front-End-Web-Seiten beschäftigt und habe bis jetzt mehrere Kundenprojekte mit gutem Erfolg übernommen. Ich arbeite derzeit auf der Website www.thrivetech.com und habe ein Problem. Es gibt 3 Textspalten mit Bildern über jedem auf der Homepage dieser Seite, und ich kann mir keinen guten Weg vorstellen, sie alle gleich hoch zu halten. Bei unterschiedlichen Bildschirmbreiten ändern diese 3 Spalten die Höhe und stimmen manchmal nicht überein. Squarespace-Objekte reagieren nativ, und wenn der Bildschirm klein genug wird, stapeln sich diese 3 Spalten aufeinander und sehen gut aus. Ich habe eine Menge Custom CSS hinzugefügt, um Hintergrundfarben, Textfarben usw. zu ändern, kann aber nicht herausfinden, wie das funktioniert. Selbst wenn ich ALL CSS entferne und nur eine einfache weiße Seite mit schwarzem Text habe, tun diese Spalten das immer noch und bleiben nicht auf der gleichen Höhe. Ich habe mich sogar an Squarespace-Support gewandt und sie haben keine Lösung gefunden. Siehe Bild unten:

Ich würde einige CSS Quelle, aber es ist am besten auf die Website navigieren zu thrivetech.com und überprüfen den CSS, um zu sehen, was los ist. Ich habe überlegt, etwas wie JS und jQuery zu verwenden, um die Höhe aller 3 davon zu erhalten, zu bestimmen, welches das Größte ist, und dann die Höhe aller 3 auf die größte Höhe zu setzen, aber es scheint, dass es einfacher und eleganter sein sollte reine CSS-Lösung? Danke fürs schauen!

Answer 1

BESCHLOSSEN:

ich das Problem behoben eine Medienabfrage unter Verwendung der übergeordnete Element dieser drei Spalten Anzeige einzustellen: flex; wenn das Fenster mindestens 640 Pixel breit ist. Der Grund, warum ich die Medienabfrage benötige, ist, dass sie als Blöcke angezeigt werden müssen, wenn das Fenster kleiner wird, so dass wir Squarespaces natives Responsive Design nutzen können, so dass die Spalten auf mobilen und kleineren Bildschirmen übereinander gestapelt werden. Hier ist ein einfacher Pseudocode:

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