Schriftgröße für Html-Element in Einkaufswelt

Shopware 5 Themes & Design
1

Hallo, die Schrift in einem Html-Element in der Einkaufswelt von SW5 wird in der Portraitansicht des Tablets viel zu klein. Wie kann man so etwas ändern, damit es so angepasst wird wie zum Beispiel bei einer Kategoriebeschreibung?

2

Das Thema scheint ja ziemlich uninteressant zu sein.

3

Wo ändere ich die Schriftgröße für Mobilgeräte des Html-Elements in der Einkaufswelt??? Die Schriftgröße wird bei Mobilgeräten ab Tablet-Portrait viel zu klein.

4

Kann Dir leider beim Problem nicht helfen, aber warum machst Du zum Thema zwei Threads auf: themes-und-design-f101/sw5-html-element-in-einkaufswelt-schrift-zu-klein-t26905.html

5

[quote=“verpacken24”]Kann Dir leider beim Problem nicht helfen, aber warum machst Du zum Thema zwei Threads auf: themes-und-design-f101/sw5-html-element-in-einkaufswelt-schrift-zu-klein-t26905.html[/quote] Ich habe gedacht, dass ich mich im ersten Thread vielleicht etwas ungeschickt ausgedrückt habe. Desweiteren bewegt sich mir bei so wichtigen Dingen im Forum zu wenig. Das Problem habe doch schließlich nicht nur ich, oder?

6

Hey zusammen, ich habe die beiden Themes zusammengefasst. Viele Grüße, Stephan :shopware:

7

Das Problem wird wohl eher sein, dass alle gerade damit beschäftigt sind ihre eigenen Shops umzustellen und dort Probleme zu lösen und nicht, dass es keinen interessiert. Das wird allerdings nicht besser wenn man mehrere Themen aufmacht und sich beschwert wie sche*** die Einkaufswelten sind :wink: So müsste eine Anpassung funktionieren (ich gehe davon aus, dass es nur Einkaufswelten betrifft die auf “Resize” stehen): - Eigenes Theme erstellen - Eigene Less-Struktur anlegen (mindestens eine all.less, wie in den DevDocs beschrieben) - Folgendes in eine der Less-Dateien einfügen: /\* \* Ausgangswert für alle Größen \*/ .emotion--mode-resize .emotion--html p { .unitize(font-size, 40); } /\* \* ab phoneLandscape \*/ @media screen and (min-width: @phoneLandscapeViewportWidth) { .emotion--mode-resize .emotion--html p { .unitize(font-size, 32); } } /\* \* ab tablet (portrait) \*/ @media screen and (min-width: @tabletViewportWidth) { .emotion--mode-resize .emotion--html p { .unitize(font-size, 24); } } /\* \* ab tablet (landscape) \*/ @media screen and (min-width: @tabletLandscapeViewportWidth) { .emotion--mode-resize .emotion--html p { .unitize(font-size, 14); } } /\* \* ab desktop \*/ @media screen and (min-width: @desktopViewportWidth) { } Damit kann man dann für jede Displaygröße eine eigene Größe angeben. Die Werte sind so hoch gewählt, weil die HTML-Elemente verkleinert werden, daher habe ich den Ausgangswert hoch gesetzt. Das Ganze muss vermutlich noch um weitere Elemente (Überschriften etc.) erweitert werden. Der letzte ist leer und benutzt daher den vorherigen Wert weiter. Da könnte man auch noch eine weitere Definition mit einfügen, einfach aus den vorherigen kopieren.

1 „Gefällt mir“
8

Hallo, meinst Du unter ‘/themes/Frontend/EigenesTemplate/frontend/_public/src/less/_components’ ein Verzeichnis ‘emotions.less’ erstellen und dann diesen Inhalt eintragen? Danach noch in der ‘/themes/EigenesTemplate/frontend/_public/src/less/all.less’ den Eintrag ‘@import “_components/emotions”;’ machen?

9

Ja, genau das meinte ich.

10

Danke für den Tip, das hat gut funktioniert… Am Besten gleich noch die Zeilenhöhe mit anpassen wie folgt: /\* \* Ausgangswert für alle Größen \*/ .emotion--mode-resize .emotion--html p { .unitize(font-size, 40); .unitize(line-height, 40); } /\* \* ab phoneLandscape \*/ @media screen and (min-width: @phoneLandscapeViewportWidth) { .emotion--mode-resize .emotion--html p { .unitize(font-size, 32); .unitize(line-height, 32); } } /\* \* ab tablet (portrait) \*/ @media screen and (min-width: @tabletViewportWidth) { .emotion--mode-resize .emotion--html p { .unitize(font-size, 24); .unitize(line-height, 24); } } /\* \* ab tablet (landscape) \*/ @media screen and (min-width: @tabletLandscapeViewportWidth) { .emotion--mode-resize .emotion--html p { .unitize(font-size, 14); .unitize(line-height, 14); } } /\* \* ab desktop \*/ @media screen and (min-width: @desktopViewportWidth) { }

11

Warum so kompliziert? Erstelle einfach zwei Einkaufwelten und lege sie untereinander. Die wo die Schrift groß bleiben soll als Masonary. :wink:

1 „Gefällt mir“
12

@needtoknow schrieb:

Warum so kompliziert?

Erstelle einfach zwei Einkaufwelten und lege sie untereinander. Die wo die Schrift groß bleiben soll als Masonary. ;)

so leicht kanns sein :wink: danke hat mir sehr geholfen