Seite 1 von 1
Footer-Ansicht Tabelt-View im Hochformat
Verfasst: Mi 26. Apr 2023, 14:46
von inno
Hallo,
beim Footer (Theme SocialM5) möchte ich gerne die Tablet-Ansicht (screen 2) so wie in der mobilen Ansicht (screen 1) haben, damit lange Wörter nicht komisch umgebrochen werden. Danke für die Hilfe
Re: Footer-Ansicht Tabelt-View im Hochformat
Verfasst: Mi 26. Apr 2023, 15:26
von Tommy Herrmann
Moin,
... auch hier benötigen wir eine Online-Ansicht. Ich zum Beispiel werde jetzt nicht mit diesen Themen extra für Deine Frage eine Webseite erstellen, damit ich das einsehen kann.
Das wird über Media-Abfragen (@media) via CSS gesteuert - gucke mal im Code-Editor, da solltest Du das finden.
Wenn Du diesen Umbruch aus der Handy-Ansicht schon am Tablet haben möchtest, muss dieser Abfrage eine andere Breite gegeben werden - eben die Breite vom Tablet.
Ansonsten sollte man lange Worte auch möglichst vermeiden und eventuell auch dem Block dann eine zusätzliche CSS geben, die das Wort richtig trennt, mit:
hyphens: auto;
Re: Footer-Ansicht Tabelt-View im Hochformat
Verfasst: Mi 26. Apr 2023, 15:30
von inno
Re: Footer-Ansicht Tabelt-View im Hochformat
Verfasst: Mi 26. Apr 2023, 15:35
von Tommy Herrmann
diese Media Anweisung steht in der CSS-Datei "mbr-additional.css":
Code: Alles auswählen
@media (max-width: 767px) {
.cid-tCxcbBJDSa .mbr-text1 {
text-align: center;
}
}
Du könntest das mal so ändern - eben schon den Text ab 991px zentrieren. Also im Breiech "
HTML Editor" (rechte Seite vom "Code Editor") schreiben:
Code: Alles auswählen
@media (max-width: 991) {
.cid-tCxcbBJDSa .mbr-text1 {
text-align: center;
}
}
Re: Footer-Ansicht Tabelt-View im Hochformat
Verfasst: Mi 26. Apr 2023, 15:44
von inno
Funktioniert leider nicht! ;-(
Re: Footer-Ansicht Tabelt-View im Hochformat
Verfasst: Mi 26. Apr 2023, 16:40
von Tommy Herrmann
... ändere mal bitte vor jeder Liste (ul) jeweils (4 Mal) diese
<div class> von:
<div class="col-12 col-sm-3 col-lg-3">
in:
<div class="col-12 col-sm-0 col-lg-3">
(... oder eben die class="
col-sm-3" ganz da raus löschen)
Gucke Dir diese Bootstrap-Seite zu den Grids bitte dazu an:
https://getbootstrap.com/docs/5.0/layout/grid/
Dann ändere im "CSS Editor" diese Media-Anweisung:
Code: Alles auswählen
@media (max-width: 991px) {
div > *:last-child {
margin-top: 0 !important;
}
}
in diese ab:
Code: Alles auswählen
@media (max-width: 991px) {
div > *:last-child {
margin-top: 0 !important;
}
.mbr-text {
text-align: center;
}
}
Im Screenshot markiert:
Das sieht dann am Tablet so aus:
Re: Footer-Ansicht Tabelt-View im Hochformat
Verfasst: Mi 26. Apr 2023, 17:32
von inno
Ein Traum! Danke!
