Textumbruch auf Mobilansicht aufgrund der Easy Footer-Themenkomponente defekt

Unterstützung
1

Auf https://community.drownedinsound.com/ ist in den letzten Stunden etwas mit der Website passiert, sodass der Zeilenumbruch nicht mehr angewendet wird und es zu anderem seltsamen UI-Verhalten kommt. Dies geschieht nur in der mobilen Ansicht.

image
image1920×779 190 KB

Dort gibt es ein paar Threads, in denen sich Leute über das gleiche Verhalten beschweren, sodass dies nichts Spezifisches für meinen Benutzer ist:
https://community.drownedinsound.com/t/thread-titles-arent-wrapping/66342

Sie können anhand der Zeiten der Beiträge sehen, dass dies vor etwa 12 Stunden begann, also am 08.05.2022 um 20:30 Uhr (MESZ).

1 „Gefällt mir“
2

Hallo,

Dies scheint durch Folgendes verursacht zu werden: Easy Responsive Footer
Die Komponente hat eine CSS-Zeile #main-outlet, die dies verursacht.

Es gibt einen weiteren Bericht über dieses Problem im Thema der Theme-Komponente.

Sie können diese schnelle Lösung verwenden, bis sie behoben ist.
Gehen Sie zu /admin/customize/themes und erstellen Sie eine neue Komponente.
Klicken Sie auf den CSS-Bereich für Mobilgeräte und fügen Sie Folgendes hinzu.

#main-outlet {
  width: 100%;
  max-width: 100%;
}

Screenshot 2022-05-09 at 10.49.53
Screenshot 2022-05-09 at 10.49.53323×208 12.4 KB

7 „Gefällt mir“
3

Ich habe den obigen Beitrag aktualisiert. Ich habe vergessen, die maximale Breite zu überschreiben. @ma0sm , @AquaL1te

3 „Gefällt mir“
4

Hallo! Danke dafür. Wenn ich jedoch versuche, die schnelle Lösung in den Admin-Einstellungen anzuwenden, erhalte ich diese Meldung:

Das Bearbeiten von Remote-Themes ist in Discourse deaktiviert. Bitte kontaktieren Sie uns, wenn Sie Hilfe beim Übergang von angepassten Remote-Themes zu einem lokalen Theme benötigen.

Es sieht also so aus, als ob wir hier etwas Hilfe von Ihnen benötigen :slight_smile:

2 „Gefällt mir“
5

Sie würden eine neue Theme-Komponente mit dem zusätzlichen Codeausschnitt hinzufügen. :+1:

  • Gehen Sie zu /admin/customize/themes
  • Klicken Sie auf Installieren und dann auf Neu erstellen
  • Geben Sie ihm einen Namen und wählen Sie ‘Komponente’.
  • Erstellen
  • Fügen Sie es Ihrem Theme hinzu
  • Klicken Sie auf die Schaltfläche CSS/HTML bearbeiten und fügen Sie den Code in das Feld CSS auf der Registerkarte Mobil ein
  • Und speichern
4 „Gefällt mir“
6

Danke! Das scheint funktioniert zu haben! :grin:

3 „Gefällt mir“
7

Das sieht gut aus! Vielen Dank für Ihre schnelle Hilfe!

7295b164b20a377a265b16e81812bb894b2c89b5
7295b164b20a377a265b16e81812bb894b2c89b53326×974 356 KB

Aber es gibt mehr Abstand als zuvor, glaube ich. Wird dies behoben, wenn die vollständige Korrektur implementiert ist?

1 „Gefällt mir“
8

Ich glaube, das liegt daran, dass die Anzeige nicht für die mobile Breite geeignet ist. Können Sie versuchen, den Easy responsive footer und die andere Komponente, die Sie mit dem zuvor geposteten Snippet erstellt haben, zu deaktivieren? Nur um zu prüfen, ob das Padding-Problem von den Anzeigen oder von etwas anderem herrührt?

Ich glaube, ich habe eine mögliche Lösung dafür gefunden. :thinking:

Könnten Sie dies zur selben neuen Komponente hinzufügen, die Sie zuvor erstellt haben, um zu prüfen, wie es funktioniert? Fügen Sie es einfach unter dem vorherigen Snippet ein @dis_whiterussian

.wrap {
  margin-left: unset;
  margin-right: unset;
}
5 „Gefällt mir“
9

Danke, das scheint es behoben zu haben!

3 „Gefällt mir“
12

Ich habe eine Korrektur am einfachen Footer vorgenommen

5 „Gefällt mir“
13

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.