Maximale Breite & variable Breite: Probleme bei Tablet-Ansicht

Hallo,

zur Ausgangslage: Ich möchte die Textbereiche schmaler machen, um das Leseempfinden zu verbessern.

Option A: Ich verringere die Breite der Text-Widgets variabel anhand des Rasters.

Problem A: Bei der Ansicht auf dem Tablet, wird der Text gequetscht und nicht die gesamte Breite genutzt (s. z.B. hier https://leichtlast.de/philosophie/)

Option B: Ich verringere die maximale Breite vom gesamten Projekt im Layout.

Problem B: Seiten, die nach wie vor breit sein sollen, werden zu schmal (z. B. der Shop).

Gibt es eine Lösung für Problem A? Oder gibt es die Möglichkeit, die maximale Breite - z.B. im Shop - anders zu wählen, als im Rest des Projekts?

Viele Grüße

Pierre

Hallo,

danke für die rasche Rückmeldung!

Ist dieses Vorgehen nicht im Grunde das gleiche wie "... verringere die Breite der Text-Widgets variabel anhand des Rasters."? Mit dem Unterschied, dass man stufenlos anpassen kann? Zumindest hat es den gleichen Quetsch-Effekt auf die Tabletansicht und löst das Problem anscheinend nicht.

Viele Grüße

Pierre

Das gleiche passiert im Landscape-Modus von Smartphones.

Apropos Seitenränder: Gibt es eine Möglichkeit den Seitenrand in der mobilen Ansicht zu verringern? Ich finde der fällt etwas "verschwenderisch" aus.

Wie gesagt, das löst das Problem nicht, weder mit vw noch mit vh.

Hallo Markus ( @GYMWAVE.de),

danke für deine Hilfe.

Ich habe versucht das umzusetzen (deinen Code ins style-Tag von der CSS-Formatierung, c-Klasse angepasst):

- Obwohl nun auch im DevTool width: 100%!important; angezeigt wird, bleibt der Bereich gequetscht (s. Bild 1).

- auch wenn ich ein neues ZP-Projekt anlege und damit teste, tritt das Problem auf (s. Bild 2). Der CSS-Code im Test-Projekt ist:

<style>
@media only screen and (max-width: 1280px)
.zpColumn.odd.zpColumnWidth1.c11.first.last{
  width: 100%!important;
}
</style>

Was mache ich falsch?

Okay danke, ich habe es dir geschickt

Jetzt klappt's! Ich habe vor die Klasse noch eine geschweifte Klammer gesetzt und dann ging's:

@media only screen and (max-width: 840px) { .zpColumn.odd.zpColumnWidth1.c8.first.last {
  width: 100%!important;
  }
}

Mit padding-left: 8px!imporntant;  bzw. padding-right: 8px!imporntant; kann ich dann den Seitenrand in der mobilen Ansicht verringern, wobei dann der Cookie-Einstellungen-Button in den Text ragt. Konnte noch nicht rausfinden, wie ich dessen Breite/Schriftgröße ansteuer...