Problem: Schwankende Blockhöhen von nebeneinander liegenden Blöcken.

Die Gantry Templates von RocketTheme sind zwar immer sehr schön, vor allem sind immer alle nebeneinander liegenden Block wunderbar gleich hoch. Aber nur solange man sich diese in der Demo anschaut. Sobald man ein lebendes Projekt realisiert, wird man in den Blöcken eben nicht wie in der Demo immer hübsch aufeinander abgestimmt gleich lange Inhalte haben, sondern von wechselnder Textlänge oder Absatzhöhe. Nun flattern die Blöcke in ihrer Höhe, was dem Designer natürlich eine Dorn im Auge ist.

 

 

Lösung in Gantry 5 für die Synchronisierung der Blockhöhen

In meinen früheren Templates habe ich mir für diesen Zweck ein JavaScript adaptiert (syncHeight.js) welches alle Geschwisterelemente in der Dom-Struktur mit einer bestimmten Class-Selektor in der Höhe synchronisierte/ausglich. In Gantry 5 ist das nicht mehr notwendig. 

Die Lösung ist recht einfach machbar, in dem den Blöcken einfach der Class-Selector equal-height mitgegeben wird. D.h. allen Geschwisterelement muss dieser Selector verpasst werden. Mehr ist dazu gar nicht notwendig.



Hiermit wird im Grund das Flex-Box display:flex auf die Box-Blöcke (.g-block) angewendet.

Diese Selector-Klasse gehört übrigens zu den theme-Block-Variations / Box-Variations mit dem Name "Equal Height".