Mobirise 4 /Accordion--FAQ

[struggle]

Hallo,

ich teste gerade verschiedene Blöcke, so auch den Accordion-FAQ Block von Mobirise4. Wenn ich mir diesen Block am Handy betrachte, dann bricht die jeweilige Schrift mitten im Wort unschön um. Und dann auch noch unter dem Pfeil.Zu sehen ist das

http://www.online2web.de/accordion.html

Den Block habe ich zur Ansicht unverändert belassen.

Kann man das so ändern, daß es am Handy vernüftig aussieht ?

[Tommy Herrmann]

Moin,

ich verstehe nicht ganz was Du meinst.

Die Worte brechen doch völlig normal um - also nach Leerzeichen. Meinst Du die zu langen Titel, die am Handy umbrechen? Auch das ist normal in der Schriftgröße, wie sollte das denn sonst dargestellt werden?

Entweder kürzere Titel oder kleinere Schrift ...

... so z.B. mit dieser Schriftgröße (anstatt 1.5rem):

font-size: 1rem;

[struggle]

Ja, klar. Wird aber ein Wort etwas länger, dann wird es unschön. Den (fast) gleichen Block habe ich auf meiner Immobilienseite (ich teste jetzt immer erst woanders)

https://www.immo4live.de/tipps.html

Dann wird es wohl die kleinere Schrift werden.

[Tommy Herrmann]

ja Du - aber das ist doch ganz logisch, dass zu lange Wörter nicht aussehen.

Ein Reisebus passt doch auch nicht in Deine Auto-Garage zu Hause - das muss schon in irgendeiner Form angepasst werden.

[Tommy Herrmann]

Du könntest ja auch nur dieser CSS-Class am Handy mit einer Media-Abfrage eine kleiner Schrift geben, also z.B. bei Deiner Seite "tipps.html" das so in den Bereich "CSS Editor" vom Block mit dem Akkordeon kopieren (nicht getestet):

Code: Alles auswählen

@media (max-width: 767px) { 
  .display-5 { 
    font-size: 1rem; 
  } 
}

1rem = "Root EM" = 100% der Standard Schriftgröße

Du könntest z.B. auch schreiben:

font-size: 0.8rem; (80% vom Standard)

[struggle]

Dankeschön, werde ich versuchen !

P.S. Du kennst meine Garage nicht

[struggle]

Das mit der media-anweisung funktioniert, die Schrift wird kleiner dargestellt, sehr schön.

Im Bearbeitungsmodus von Mobirise kann man ja die Ansicht (PC, Tablet, Handy) wechseln.
In der Handy-Ansicht werden die Worte nicht umgebrochen, aber an meinem Handy.
Könnte man das noch ändern, indem ich in der media-Anweisung die Pixel erhöhe ?

[struggle]

Bitte die Frage vergessen, ist natürlich Blödsinn, Änderung hat sich ja bemerkbar gemacht.
Ich habe in der media-anweisung 0,9rem eingestellt, und jetzt ist alles in Ordnung.

[Tommy Herrmann]

Moin,

bitte nie vergessen auch am Handy immer den Browser-Cache (Zwischenspeicher) zu löschen - und gerade am Handy nach CSS Änderungen.

Das geht z.B. am "Android Browser" so:

> Hamburger Menü ≡ > Einstellungen > Persönliche Browserdaten > Browserdaten löschen

Dort dann hierfür nur "Zwischengespeicherte Bilder und Dateien" angehakt lassen und den Button "Dateien löschen" drücken.

Anschließend auch noch den Browser schließen und neu starten.

[struggle]

ERst mal, ein schönes Osterfest !

Ich habe noch ein paar "Verständnisfragen":

Da ich ja nun mit einer media-anweisung die Textgröße für das Handy geändert habe, würde ich gerne wissen, ob ich auch den Pfeil in der Größe verkleinern kann, und wenn ja, wie bitte

Dann würde ich gerne wissen, ob ich das Symbol für den Pfeil durch ein anderes Pfeilsymbol austauschen könnte, ich brauche dann ja wohl zwei Symbole (nach unten und nach oben)

Und dann würde ich gerne wissen, warum sich die Richtung des Pfeilsymbols (nach unten/oben) erst nach Veröffentlichung bemerkbar macht und nicht schon im Bearbeitungsmodus

https://www.immo4live.de/tipps.html

Besten Dank im Voraus !

[Tommy Herrmann]

Moin,

und auch Dir frohe Ostern

Es ist immer etwas schwierig, so etwas genau zu beschreiben, wenn man es nicht direkt vor sich hat und testen kann.

Der Pfeil nach unten kommt aus dem "mbr-icontfont" und hat den Namen "mbri-arrow-down":

<span class="sign mbr-iconfont mbri-arrow-down inactive"></span>

Der Pfeil nach oben kommt aus dem "mbr-icontfont" und hat den Namen "mbri-arrow-up":

<span class="sign mbr-iconfont inactive mbri-arrow-up"></span>

Beide werden mit der class="sign" gesteuert:

<span class="sign mbr-iconfont mbri-arrow-down inactive"></span>

Der könntest Du ebenso am Handy eine andere Größe geben, also dann z.B. so:

Code: Alles auswählen

@media (max-width: 767px) { 
  .display-5 { 
    font-size: 1rem; 
  } 
  .sign {
     font-size: 1.5rem;
  }
}

Wenn Du ein ganz anderes Symbol willst müsstest Du mal auf der Arbeitsseite auf dieses Symbol klicken und gucken, ob sich der Icon-Editor von Mobirise öffnet.

Dann kannst Du dort ein anderes Symbol wählen. Wie die jetzt alle heißen, weiß ich nicht auswendig. Im Icon-Editor kann man übrigens auch gleich die Größe und die Farbe festlegen.

[struggle]

Hallo Tommy, danke für Deine Hilfe, ich habe das icon mit 1.5rem geändert, sieht gleich viel besser aus.

Wenn Du ein ganz anderes Symbol willst müsstest Du mal auf der Arbeitsseite auf dieses Symbol klicken und gucken, ob sich der Icon-Editor von Mobirise öffnet.

Ich habe vormals schon etliche Male auf der Arbeitsseite auf das Symbol geklickt, es hatte sich nie was getan. Irgendwann jedoch klappte es, hab mir ein Symbol rausgesucht und die Größe geändert (man könnte sich ja auch erst mal woanders ein Symbol raussuchen und im Editor schauen, wie es heißt und dann übertragen).

Die Aktion hatte jedoch zur Folge, daß das mit der Auf- und Ab-Darstellung des Pfeiles nicht mehr klappte. Also bin ich wieder zurück.

Was ich immer noch nicht verstehe, warum sehe ich den Pfeil "arrow-up" erst nach Veröffentlichung meiner Seite. Und im Editor habe ich an keiner Stelle: <span class="sign mbr-iconfont inactive mbri-arrow-up"></span> gefunden.

[Tommy Herrmann]

Moin,

nee - findest Du auch nicht - war jetzt auch nicht so richtig klar von mir beschrieben, sorry. Das ist aber eben auch nur über den Browser manchmal nicht so schnell und klar im Quelltext zu erkennen. Die class="sign" ändert aber in jedem Fall beide Icons (runter und hoch).

Das steht in diesem Fall bei diesem Akkordeon vom Sandard-Thema "Mobirise4" auch nicht direkt in der CSS, sondern in der JavaScript-Datei "mbr-switch-arrow.js" von Mobirise. Dort wird dann geguckt, ob das Panel offen ist oder eben nicht ('collapsed') und dann dem Pfeil entsprechend diese andere Icon-Class zugewiesen:

https://www.immo4live.de/assets/mbr-swi ... h-arrow.js

Wollte man also diese beiden Pfeile ("nach unten" und "nach oben") ändern, müsste man diese JavaScript-Datei auch noch neu schreiben.

Da lasse aber bitte lieber mal die Finger davon weg, denn diese JavaScript-Datei ist ein Teil von der Software und müsste dann eigentlich auch in der Software selbst und nicht nur im Verzeichnis "assets" geändert werden, damit Mobirise das nicht mit jedem Publizieren wieder neu überschreibt. Auch ein Update von Mobirise würde dann diese Änderung von Dir wieder zunichte machen.

Weiterhin wird das im Standard-Thema "Mobirise5" noch genauso gemacht, nur ist dort dann diese JavaScript-Datei vollkommen leer (Pfusch bei der Programmierung) und diese JavaScript-Anweisung wird versteckt in der riesen Themen-Datei "script.js" gesetzt:

https://www.mobirise-tutorials.com/Tuto ... /script.js

Also Finger weg von einer solchen Änderung

Falls Du es dennoch versuchen willst, müsstest Du wahrscheinlich in dieser Datei nur die beiden angegeben Class-Namen ändern und diese mit den neuen Class-Namen des neuen Icons versehen:

Code: Alles auswählen

if ($id.indexOf('toggle') != -1){
    if ($(this).hasClass('collapsed')) {
        $(this).find('span.sign').removeClass('mbri-arrow-down').addClass('mbri-arrow-up'); 
    }
    else{
        $(this).find('span.sign').removeClass('mbri-arrow-up').addClass('mbri-arrow-down'); 
    }
}

... aber zusätzlich muss auch die im "Code Editor" voreingestellte Icon-Class "mbri-arrow-down" dennoch geändert werden.

[struggle]

Vielen Dank für die ausführliche Erklärung, ich hatte es mir einfacher vorgestellt, da es wohl auch schon Generatoren für Accordions gibt.
Weiterhin schöne Ostern

[Tommy Herrmann]

Wie es aussieht, gibt es bei den Akkordeon - Icons zum Öffnen und Schließen der Tabs auch gerade einen neuen Bug, den ich soeben erst durch die Tests für Dich gefunden habe und hier im Hersteller-Forum gemeldet habe:

https://forums.mobirise.com/discussion/ ... ent_109026