Höhe der Produktcontainer in der Mobilen Ansicht

[kraho]

Habe in der Mobilen Ansicht das Layout geändert, damit 2 Produkte nebeneinander angezeigt werden.

Leider scheinen die Boxen angepasste Höhe zu haben, damit kommen Uregelmässigkeiten wie auf den Bild.

Gibt es eine Möglichkeit im CSS die Produkte einer Zeile immer gleich hoch zu bekommen?

Danke für Eure Hilfe!

 

[Shad86]

Du musst theoretisch "nur" dem richtigen Element ein "min-height: xx px;" verpassen. Dann ist es immer mindestens xx Pixel hoch.

Per Rechtsklick und Element untersuchen bei Firefox kannst du rumprobieren welchem Element du dies zuordnen musst um den gewünschten Effekt zu erzielen.

Denk nur dran das es nur eine Voransicht ist und du bei gelingen das ganze noch in der angegebenen Datei ändern musst um es tatsächlich im Shop zu übernehmen.

[Scully]

Der Produkte-Titel ist das Problem. Firebug oder Deledoper - Tools Im Browser starten. Den Titel markieren und Element untersuchen.

Da wird dann angezeigt, welche CSS Eigenschaften relvant sind.

 

Diese dann Ändern mit min-height setzen oder max-height in Kombination mit der Eigenschaft overflow, sodass "überschüssiger" Text einfach gekappt wird.

Ist meines Wissens aber ein Problem auch in der Standart-Konfiguration von PS 1.6.

Edited June 30, 2017 by Scully (see edit history)

[rictools]

Standardmäßig sind die Produktnamen dermaßen stark gekürzt, daß das Problem kaum auftritt, meistens benötigt man aber längere Produktnamen. Und weil die eine Box - anders als bei einer Tabelle - nicht weiß wie viele Zeilen der Produktname in der Box daneben benötigt, kann man mit min-height zwar alle Boxen so groß machen wie die theoretisch höchste Box, man hat dann aber oft höhere Boxen als eigentlich notwendig.

[Scully]

Das stimmt, darum wäre wohl max-lines und line-height eine Möglichkeit, das zu fixen.

Andernrfalls hat man bei vielen Produkten unschöne Leerbereiche.

[Scully]

Hier mal ein Code-Auszug aus unserer geänderten global.css.

Der Abschnitt beginnt ab ca. Zeile 6244.

.product-name {
  font-size: 17px;
  line-height: 23px;
    /* height: 46px; */
  color: #3a3939;
  margin-bottom: 0; }
  .product-name a {
    font-size: 17px;
    line-height: 23px;
    /* height: 46px; */
    color: #3a3939; }
    .product-name a:hover {
      color: #515151; }
    @media (max-width: 768px) {
      .product-name a {
        font-size: 14px;
        line-height: 17px;
        height: 32px;
        overflow: hidden;
        } }

Einfach mal damit testen. Die entscheidenen Veränderungen sieht man an auskommentierten Zeilen sowie height, line-height und overflow.

Dieses Setting macht durchgehend zweizeilige Produktenamen, egal wie lange der Name tatsächlich ist.

Edited July 1, 2017 by Scully (see edit history)