Darstellungsfehler tpl_modified_responsive Firefox Android

[walkabout77]

Hallo zusammen,

beim Aufruf meines Shop auf einem Android Handy im Firefox werden bei der Kategorienübersicht die Boxen verschoben, wenn der Titel lang ist und einen Zeilenumbruch hat.

Beim testen auf dem PC Win11 Firefox 111.0.1 ist im Mobilen Modus (Ctrl + Shift + M) alles in Ordnung.

hier ein Bild davon:

[ Für Gäste sind keine Dateianhänge sichtbar ]

Müsste wohl ein CSS Problem sein...

Hier die PC Version:

[ Für Gäste sind keine Dateianhänge sichtbar ]

Gruss Stefan

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

[Markus]

Hi Stefan,

wo kann ich mir das mal anschauen?

Markus

[dukie]

Du hast hier nur 2 Möglichkeiten. Entweder der Überschrift mehr Platz geben oder den Text verkürzen.
Du kannst der Class für die Überschrift eine feste Höhe geben (von ungefähr 2 Textteilen) und somit ist wieder alles gleich hoch, oder das Listig bei so schmalen Viepoints auf einspaltig umstellen.

[walkabout77]

wo kann ich mir das mal anschauen?

Hallo Markus, klar gerne. Der Shop ist im Moment nicht öffentlich, kann ich Dir eine PN senden mit Zugangsdaten?

Gruss Stefan

[walkabout77]

@dukie

danke für den Vorschlag, das ist mir bewusst. Wollte es aber trotzdem melden, damit man es ev. korrigieren kann.

Gruss Stefan

[noRiddle (revilonetz)]

.subcat_title  hat ein display:table  und auf tables wirkt eine feste height-Angabe nicht, die hier auf 38px  gesetzt ist.

Gruß,
noRiddle

[Markus]

Hi,

es dürfte aber trotz der definierten Höhe zu keinem Höhenunterschied kommen ... zumindest nicht bei 2 Zeilen.

Code: CSS  [Auswählen]

.subcat_title {
  display:table;
  padding:5px 5px;
  color:#444;
  background:#f5f5f5;
  font-size:12px;
  height:38px;
  width:100%;
  line-height:14px;
  text-align:center;
  font-weight:bold;
  box-sizing: border-box;
}
.subcat_title_inner {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  word-break:break-all;
}

Daher die Frage ob man sich das mal anschauen kann. Ich kann das mit dem orignal tpl_modified_responsive Template nicht nachstellen .. auch nicht in der mobilen Version.

Markus

[noRiddle (revilonetz)]

Was meinst du mit "trotz der definierten Höhe" ?, ich sagte ja nicht, daß die Höhenangabe sich negativ auswirkt sondern, daß sie nicht greift.

In der Tat verhält es sich so, daß bei zwei Zeilen noch nichts passiert.
Wer lange Kategorie-Namen hat müsste dann eben auf schmalstem Bildschirm mit .subcatlist  auf 100% gehen und den Breakpoint für 33.333%  etwa früher setzen. *EDIT* Eigtl.. einen weiteren Breakpoint mit 50% einfügen und den mit 33.333% evtl. verschieben. *END_EDIT*

Gruß,
noRiddle

[Markus]

Hi noRiddle,

wie du sagst ... bei 2 Zeilen passiert noch nichts ... demnach düfte auch bei walkabout77 nichts passieren.
Bei ihm verschiebt es aber bzw. der eine Container wird höher weshalb nicht mehr sauber gefloatet wird.
Auf das habe ich mich bezogen.

DIe Höhe greift schon zumindest wenn du nur 1 oder 2 Zeilen hast.
Die Höne wird bei "table" wie eine min-height interpretiert und bei 3 Zeilen wird der Container dann höher.

Ich würde das eher mit "flexbox" und "line-clamp" machen. Das wäre das sauberste.

Markus

[noRiddle (revilonetz)]

Ah, stimmt, hatte die Screenshots von walkabout77  schon vergessen.

Was eine Lösung betrifft: Da hast du mehr Plan und Erfahrung.
Meine Wenigkeit war bislang was Flexbox betrifft immer skeptisch, weil es nicht von allen Browsern unterstützt wird/wurde.
Aber IE kann man langsam ja wirklich mal ad acta legen.

Gruß,
noRiddle

[walkabout77]

@Markus

Wahrscheinlich hast Du mein Post übersehen...

Hallo Markus, klar gerne. Der Shop ist im Moment nicht öffentlich, kann ich Dir eine PN senden mit Zugangsdaten?

[noRiddle (revilonetz)]

Schau mal ins Backend des Shops bei den Credits (Info-Icon oben rechts), dort findest du die Mail-Adresse mit welcher du Markus erreichst.

Gruß,
noRiddle

[walkabout77]

@noRiddle

Danke Dir, wieder was gelernt

[walkabout77]

Hier der Tip von Markus:

ersetze mal bitte im stylesheet das hier:

Code: CSS  [Auswählen]

.subcat_title {
  display:table;
  padding:5px 5px;
  color:#444;
  background:#f5f5f5;
  font-size:12px;
  height:38px;
  width:100%;
  line-height:14px;
  text-align:center;
  font-weight:bold;
  box-sizing: border-box;
}
.subcat_title_inner {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  word-break:break-all;
}
 

Mit dem hier:

Code: CSS  [Auswählen]

.subcat_title {
  display:flex;
  align-items:center;
  font-size:12px;
  line-height:14px;
  padding:5px 5px;
  color:#444;
  background:#f5f5f5;
  height:38px;
  width:100%;
  text-align:center;
  font-weight:bold;
  box-sizing: border-box;
}
.subcat_title_inner {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}
 

Danke Markus, das funktioniert. Die Titel der Kategorieboxen war nicht mehr zentriert, deshalb habe ich noch folgendes zu .subcat_title_inner hinzugefügt:

Code: CSS  [Auswählen]

margin: auto;