astridx/meinblog

cassiopeia-statisch-oder-fluid/

Opened this issue · 7 comments

utterances-bot commented

Statisch oder fluid | Astrid Günther

Die Einstellungen für Cassiopeia lassen zwei Optionen für das Layout der Seite zu, statisch oder fluid. Diese Einstellungen wirken sich…

https://blog.astrid-guenther.de/cassiopeia-statisch-oder-fluid/

Diarmiud commented

Hallo,
danke erst einmal für den hilfreichen Artikel.
Mein Anliegen: Mir ist die maximale Breite der container-component zu breit. Ich würde es gerne auch auf großen Bildschirmen auf 750 Pixel begrenzen, da die Schrift auf normalen Bildschirmen ansonsten zu breit wird. Das ist nicht lesefreundlich.
Gibt es dafür eine einfache Einstellmöglichkeit oder muss ich an mehreren Stellen etwas ändern?
Vielen Dank
Peter

astridx commented

Du findest in der template.css von Cassiopeia (bei mir Zeile 636) die Einträge

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}

Diese kannst du in einer user.css überschreiben. Teste aber danach genau, weil in einem Template ja alles im System zusammen arbeitet.

Mehr dazu findest du auch unter https://blog.astrid-guenther.de/cassiopeia-optionen/#layout

Diarmiud commented

Vielen Dank - ich probiere es heute gleich aus!

Diarmiud commented

Hmmh, ich kann bei den Angaben ändern, was ich will, hat scheinbar keine Auswirkung. Zu sehen unter:
https://www.vitfit.de/blog/testseite-joomla.htm

Aktuell in der user.css:
@media (min-width: 576px) {
.container-sm, .container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container-md, .container-sm, .container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container-lg, .container-md, .container-sm, .container {
max-width: 750px;
}
}
@media (min-width: 1200px) {
.container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 750px;
}
}
@media (min-width: 1400px) {
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 750px;
}
}

astridx commented

Sorry, du hast recht. Cassiopeia verwendet ja für das "Gerüst" CSS-Grid (https://blog.astrid-guenther.de/css-grid-and-bootstrap-5-in-joomla/).

Versuche einmal das:

.site-grid {
  max-width: 750px;
  margin: auto;
}

@media (min-width: 576px) {
  .site-grid {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .site-grid {
    max-width: 720px;
  }
}
Diarmiud commented

Hallo Astrid, das scheint zu funktionieren, siehe Link oben. Vielen Dank für deine Hilfe!
Ich werde hier berichten, wenn mir auf einem Gerät diesbezügliche Probleme begegnen!

astridx commented

das scheint zu funktionieren, siehe Link oben. Vielen Dank für deine Hilfe!

Super, freut mich.

Ich werde hier berichten, wenn mir auf einem Gerät diesbezügliche Probleme begegnen!

Danke