erdmannfreunde / optimist-theme-bundle

Kostenloses Contao Theme für einfache Websites
https://erdmann-freunde.de/produkte/contao-themes/optimist/
Other
16 stars 6 forks source link

Fehlerhafte Grid-Klasse #18

Closed kroerig closed 1 year ago

kroerig commented 1 year ago

Hallo,

folgendes Problem habe ich in der Version 2.0.2 aufwärts festgestellt.

Folgende Kombination, die man erhält, wenn man Grid-Reihen- und Spalten-Definitionen kombiniert, führt dazu, dass display: grid doppelt definiert wird und dann zu riesen Abständen zwischen Text- und Downloadelementen führt.

<div class="row ce_rowStart">
   <div class="ce_columns ce_colStart col-lg-7  m-b-2">
    <div class="ce_text block"></div>
    <div class="ce_download block"></div>
  </div>
  <div class="col-md-8 col-lg-5 col-xl-4 col-start-md-3 col-start-xl-9 "> </div>
</div>

grafik

denniserdmann commented 1 year ago

Das Problem tritt immer dann auf, wenn eine Spalte deutlich kürzer als die andere ist. Das Problem lässt sich lösen, indem die kürze Spalte die Grid-Klasse align-start bekommt, da sie sich dann nicht mehr auf die Höhe steckt und den Inhalt vertikal „verteilt“.

Würden die Spalten kein display: grid haben, wären mehrspaltige Inhalte wie z.B. die Leistungen in der Demo nicht gleich hoch:

image
kroerig commented 1 year ago

Das klappt aber auch nur auf dem PC. Am Smartphone sind die Elemente bei mir nicht gleich groß.

bennie99 commented 1 year ago

@denniserdmann
Aber in der OPTIMIST Demo haben die columns anscheinend kein display:grid und da geht's doch auch.

denniserdmann commented 1 year ago

@bennie99 Das Problem, das @kroerig beschreibt, ist ein „Problem“ der Version 2.X. Die Demo https://optimist.contao-theme.de/ zeigt Version 1, während unter https://optimist-2.contao-theme.de/ die neue Version zu sehen ist.

denniserdmann commented 1 year ago

Das klappt aber auch nur auf dem PC. Am Smartphone sind die Elemente bei mir nicht gleich groß.

Sind die Elemente auf dem Smartphone nebeneinander oder untereinander? Die gleiche Größe bezieht sich auf mehrere Elemente in einer Reihe, also nebeneinander. Wenn die Elemente untereinander stehen, möchte man normalerweise nicht, dass diese gleich groß sind, weil es dann meist „falsch“ aussieht.

kroerig commented 1 year ago

auf dem Smartphone sind sie untereinander, ja. Für sieht es falsch aus, dass die Elemente unterschiedlich "lang" sind.

denniserdmann commented 1 year ago

Es kommt auch auf den Einsatzzweck an. Es sollte aber Möglichkeiten geben, eine gleiche Höhe zu erreichen (das ist nur nicht Teil des Tickets und des eigentlichen Problems).