Größe
Im Größe-Reiter kannst du die Maße von verschiedenen Elementen bestimmen.
Dabei gibt es unterschiedliche Maßeinheiten. Die gängiste ist Pixel (PX). Häufig werden aber auch Prozent (%) und Viewport Height (VH) verwendet. Hier mehr über Maßeinheiten.
Auto
Die meisten Elemente in Chimpify sind standardmäßig auf “Auto” gesetzt. Dementsprechend sind sie genau so breit und so hoch wie ihr Inhalt. Die Breite und Höhe passt sich also automatisch an.
Eine Sektion ist z.B. genau so breit und so hoch, wie die Elemente, die sich darin befinden:
Du siehst, je mehr Elemente in der Sektion sind, desto höher wird sie:
Außerdem passt sich die Breite und Höhe je nach Bildschirmgröße automatisch an:
Hinweis
Generell solltest du vorsichtig sein, wenn du mit festen Breiten und Höhen arbeitest.
Wenn du z.B. einem Container eine Maximalbreite von 600px, aber einem darin befindlichen Button eine Breite von 800px gibst, ragt der Button logischerweise über den Container hinaus:
Bei mobilen Endgeräten wird das Ganze noch schlimmer. Desktops haben einen breiten Bildschirm. Mobile Endgeräte dagegen einen schmalen. Deshalb hast du unter Mobile z.B. nichtmal ausreichend Platz, um den 800px breiten Button anzuzeigen. Daher muss dein Besucher nach rechts scrollen:
Sehr unschön. Deshalb ist es besser, wenn du alles auf “Auto” lässt und nur in Ausnahmefällen feste Größenangaben machst. Arbeite anstelle dessen lieber mit Innenabständen, um die Größe von Elementen zu bestimmen:
Breite
Hiermit definierst du die feste Breite für ein Element. Zum Beispiel, wenn du einem Bild eine feste Breite geben willst:
Beachte hier, dass die Höhe auf “Auto” steht und sich dementsprechend automatisch je nach Breite anpasst.
Höhe
Hiermit definierst du die feste Höhe für ein Element. Zum Beispiel, wenn du einer Navigation eine feste Höhe geben willst:
Beachte hier, dass die darin befindlichen Elemente mithilfe der Layout-Optionen ausgerichtet sind und sich je nach Höhe automatisch vertikal mittig ausrichten.
Max. Breite
Hiermit definierst du die Maximalbreite für ein Element. Zum Beispiel ist ein Container standardmäßig maximal 1.200px breit, zieht sich bei einer kleineren Bildschirmauflösung aber auf die jeweilige Breite zusammen:
Max. Höhe
Hiermit definierst du die Maximalhöhe für ein Element. Zum Beispiel, wenn du eine Sektion hast, die maximal 800px hoch sein darf, weil das Hintergrundbild maximal 800px hoch ist:
Min. Breite
Hiermit definierst du die Mindestbreite für ein Element. Zum Beispiel möchtest du ein Bild haben, dass mindestens 200px breit sein soll, aber nicht kleiner:
Min. Höhe
Hiermit definierst du die Mindesthöhe für ein Element. Zum Beispiel möchtest du einer Header-Sektion eine Mindesthöhe von 100vh geben. Dementsprechend ist die Sektion immer mindestens genau so hoch wie der Bildschirm:
