Footer-Ansicht Tabelt-View im Hochformat

Allgemeine Fragen
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Footer-Ansicht Tabelt-View im Hochformat

Ungelesener Beitrag 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
Dateianhänge
screen3.jpg
screen2.jpg
screen1.jpg
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Footer-Ansicht Tabelt-View im Hochformat

Ungelesener Beitrag 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;
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Footer-Ansicht Tabelt-View im Hochformat

Ungelesener Beitrag von inno »

Hallo Tommy, hier der Link.
https://staplf7dds.mobirisesite.com/
Danke!
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Footer-Ansicht Tabelt-View im Hochformat

Ungelesener Beitrag 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;
  }
}
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Footer-Ansicht Tabelt-View im Hochformat

Ungelesener Beitrag von inno »

Funktioniert leider nicht! ;-( :crying:
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Footer-Ansicht Tabelt-View im Hochformat

Ungelesener Beitrag 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:

Footer bis 991px 1 Zeile zentriert Änderung COL und Class.jpg

Das sieht dann am Tablet so aus:

Footer bis 991px 1 Zeile zentriert.jpg
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Footer-Ansicht Tabelt-View im Hochformat

Ungelesener Beitrag von inno »

Ein Traum! Danke! :tu:
Antworten

Wer ist online?

Mitglieder in diesem Forum: Ahrefs [Bot] und 23 Gäste