Support Bereich Hier finden Sie Antworten auf alle Fragen zu Ihrem Xobor Forum.
Wählen Sie zunächst einen Hilfe-Bereich.

Hallo @Sporty

Nimm mal bitte versuchsweise den CSS Code von Ingmar wieder raus, sodass der 2.Text in der mobilen Ansicht wieder sichtbar ist.
Ich vermute, das dieser jetzt als unsichtbarer Platzhalter verhindert, das das Avatar-Bild am Ende keinen Platz hat.

Oder du verkürzt den vorhandenen 2 Text mal von "Gemeinsam gesund, schlank und fit werden und bleiben" auf "Gesund abnehmen, schlank und fit bleiben" damit der kürzer ist.


Ich habe aktuell versucht -in der mobilen Ansicht- die drei Punkte (für das Menü) und das Headerlogo samt Text nach links zu schieben.
Hierbei habe ich die Vermutung, das der ausgeblendete kleine Text in der Mobilen-Ansicht ein verschieben des Avatar-Bild trotzdem verhindert (gelber Bereich, siehe Bild).


LG, Alfred

Moin @Sporty

Danke für das Einfügen der zweiten Textreihe.
Ich musste leider den langen weißen Text verkleinern, weil der gesamte Text (wie Ingmar schon schrieb) für die Mobile Ansicht zu lang ist.
Da solltest du dir unbedingt was kürzeres einfallen lassen, der dann nicht länger ist wie der obere Text. Dann könnte man diesen auch in der vorhandenen Textgröße für die Mobile Ansicht so lassen.... Optional kannst du den Text mit dem CSS-Befehl zum Ausblenden der zweiten Textreihe von Ingmar weiter nutzen, wenn die jetzige Textlänge in der Mobilen Ansicht so bleiben soll...

Meine CSS-Befehle unten haben folgende Auswirkungen auf die Ansicht:

Ansicht vorher ohne entsprechende Codes:


Ansicht nachher mit den entsprechenden Codes unten:


Für den Fall, das du jetzt alles so haben möchtest, damit das Logo, die große Überschrift, die kleine weiße Schrift da drunter (die zu lang ist und die ich verkleinert habe) und einem Avatar-Bild auf der rechten Seite ist, dann füge mal folgende 3 CSS-Befehle für die mobile Ansicht ein:

Die drei Punkte (Menü aufrufen in der Mobilen Ansicht) habe ich weiter nach links verschoben mit folgendem CSS-Befehl:
.navbar-toggler {
padding: 0.25rem 0.15rem;
font-size: 1.09375rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: 0px;
}

Hier war der schwarz markierte Standwert auf 0.45rem eingestellt. Der Wert von 0.15rem verschiebt die drei Punkte mehr nach links, sodass für das Logo und der Header-Text mehr Platz ist.

Verschieben von Logo, Forumbeschreibung und Textzwischenraum ging mit folgendem CSS-Befehl:
.navbar-brand {
display: inline-block;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
margin-right: 2.8rem;
font-size: 0.09375rem;
line-height: inherit;
white-space: nowrap;
}

Hier waren die Standartwerte für "margin-right" vorher auf 1rem und der Standartwert für "font-size" auf 1.09375rem. Mit "font-size" änderst du den Zeilenabstand zwischen Texten im Header.

Den 2. Text (der lange kleine weiße Text unter der Forumbeschreibung) wird verkleinert mit folgendem CSS-Befehl:
.navbar #forumtitle span {
font-size: 0.40rem;
font-weight: lighter;
color: #fafafa;
}

Hier war der Standartwert für "font-size" vorher auf 0.42rem eingestellt. Der jetzige Wert von 0.40rem ist das Maximum an breite. Wenn man den auf 0.41rem hoch setzt, dann verschiebt es das Avatar-Bild wieder nach rechts unten.

Kopiere und füge dir diese 3 CSS-Befehle mal bitte in die Administration für die Mobile Ansicht unter:
Administration / Layout / Mobil und dort in den Reiter CSS/SCSS (anschl. speichern nicht vergessen)
Bin gespannt, wie sich das auf der Handy-Ansicht passen auswirkt. Müsste aber eigentlich so passen, wie im Bild oben zu sehen ist.

GANZ WICHTIG nochmal:
Bitte vor dem einfügen dieser CSS-Befehle unbedingt meine vorhandenen alten Befehle (die hiermit zu tun hatten) entfernen !!

LG und viel Spaß bei der Umsetzung...

Moin @Sporty

Das ja komisch... In der Console wo ich die CSS-Befehle entsprechend angepasst habe, wurde mir das (unter Ansicht eines Galaxy 5 Handy) passend angezeigt (siehe Bild oben in meinem letzten Beitrag).

Warum das jetzt doch nicht so angezeigt wird wie gewünscht ist mir gerade ein Rätsel.... Du hast aber keinen CSS-Befehl in der Mobilen Ansicht doppelt ?? Ich würde mir das ja gern mal bei dir genauer ansehen, aber dazu bräuchte ich entsprechende Rechte in deinem Forum....

Als Alternative würde mir jetzt folgende Lösung einfallen:
Du machst von dem Logo (das Icon mit den Personen) und den Header-Texten (die zwei Textreihen neben dem Logo) eine komplette Grafikdatei (Bild) was du dann als Logo einfügst und dann den zusätzlichen Text aus dem Wizzard komplett entfernst....

Bezügl. eines Logos könnte ich dir was zaubern, falls du keine entsprechenden Programme zur Verfügung hast.

LG, Alfred

Hallo @Sporty

Wie ich hier gelesen habe (Business Template (v4) Probleme mobile Ansicht) soll es da ab Montag ein Update geben.
Bitte lösch da die entsprechenden CSS-Befehle die ich hier geschrieben hatte, damit sich das mit dem Update nicht beißt.

@Ingmar
Könntest du bitte (ich denke das das besser ist) dieses Thema nach dem Update löschen ? Könnte vielleicht zu Verwirrungen kommen..

Lieben Gruß
Alfred