Jump to content

Höhe der Produktcontainer in der Mobilen Ansicht


Recommended Posts

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!

 

post-1347841-0-67913500-1497884115_thumb.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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 by Scully (see edit history)
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by Scully (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...