Artikelliste Fehler in Darstellung

[musikus37]

Hallo liebes Forum,

ich habe vor ein paar Tagen meinen Online-Shop neu erstellt und mir ist nun bei der Darstellung der Top Artikel und der Artikel Listen in den Kategorien folgendes Problem aufgefallen.
Ich nutze das Responsiv Template und in den Top Artikeln tauchen Lücken bei der Darstellung der Artikel auf. Dies ist auch bei der Auswahl in den Kategrorien der Fall. Dort werden unten auch meine Artikel angezeigt. Hier ist es aber auch wie auf der Startseite.

Ansehen könnt Ihr Euch das Phänomen unter www.musikshop-sontra.de

Hat vielleicht jemand eine Idee woher der Fehler in der Darstellung kommt
Ich würde mich über Rückmeldungen freuen.

Gruss
Markus

Linkback: https://www.modified-shop.org/forum/index.php?topic=41320.0

[Tomcraft]

Suche in der "/templates/tpl_modified_responsive/stylesheet.css":

Code: CSS  [Auswählen]

.lb_inner {
  border: 1px solid #eee;
  padding: 10px 10px 10px 10px;
  min-height:300px;
}

Und ersetze es mit:

Code: CSS  [Auswählen]

.lb_inner {
  border: 1px solid #eee;
  padding: 10px 10px 10px 10px;
  min-height:375px;
}

Grüße

Torsten

[musikus37]

Hallo Torsten,

vielen Dank für deinen Tipp. Dies hat das Problem gelöst.

Gruß Markus

[musikus37]

Hallo Torsten,

hast du evtl. auch noch den passenden CSS für die Mobile Darstellung. Hier bricht das Design auch etwas auseinander, wenn ein Artikel den Lieferstatus: Nicht verfügbar hat.

Gruß Markus

[Tomcraft]

Kann ich nicht nachvollziehen. Bei mir sieht es gut aus. Es ist auch der selbe Style, der dafür verantwortlich ist.

Grüße

Torsten

[musikus37]

Wenn ich mir mit der Opera App meinen Shop im Mobile Modus anseh, so bricht er bei Artikeln mit dem Lieferstatus "Nicht verfügbar" dieses um und so werden die Boxen dann eine Zeile größer. Das macht er nur bei Artikeln die nicht Lieferbar sind. Die Artikel mit 3-4 Tagen passen. Doch wenn dann ein Artikel mit 3-4 Tagen und einer mit Nicht verfügbar in einer Zeile stehen, so ist die Artikelbox mit dem Status "Nicht Lieferbar" eine Zeile höher und es verschiebt sich.

Ich hab das auch mit anderen Browser Apps.

[Tomcraft]

Im Zweifelsfall kannst du die "min-height" einfach noch ein wenig erhöhen:

Code: CSS  [Auswählen]

.lb_inner {
  border: 1px solid #eee;
  padding: 10px 10px 10px 10px;
  min-height:395px;
}

EDIT: 395px scheinen ausreichend!

Grüße

Torsten

[noRiddle (revilonetz)]

Insofern lb_shipping nicht eine von body abweichende line-height hat wäre auch das eine Lösung:

Code: CSS  [Auswählen]

lb_shipping {
  height:42px;
}

oder

Code: CSS  [Auswählen]

lb_shipping {
  height:32px;
  line-height:16px;
}

Gruß,
noRiddle

[Tomcraft]

Ja korrekt! Die Lösung ist sogar noch besser, da man den "lb_inner" nicht unnötig aufbläht! Danke dir.

Grüße

Torsten