Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Schriftgrößen auf mobilen Endgeräten
#1
Smile 
Hallo,
ich nutze für meine Projekte meistens das Mobirise4 Theme. Die Schriftgröße in den Site Styles habe ich für Text1 auf 1.2 und für Text2 auf 1 eingestellt. Wenn ich meine Site auf dem Handy anschaue, dann gibt es vorallem bei langen Worten unschöne Umbrüche.

In den Seiteneinstellungen habe ich bei "Inside <head> Code das versucht, um die Schriftgröße seitenweit für alle Stile kleiner zu setzen:


<style type="text/css">
@media (max-width: 599px) {
body { font-size:0.8em!important; }
}
</style>

Kann man Mobirise mit eigenen Media Queries beeinflussen? Das hier scheint nicht zu klappen.

Danke für einen T Smiling ipp

scheselong
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Moin,

und willkommen bei uns im Forum :hallo:

Das kann man so allgemein jetzt nicht beantworten, denn das kann von Block zu Block und auch innerhalb unterschiedlicher Themen variieren.

Mobirise arbeitet mit sehr vielen CSS-Klassen, die direkt an die HTML gesetzt werden. Z.B. wird die voreingestellte Textgröße (also jetzt für das <p> Tag) im Standard-Thema als Klasse mit dem Namen:

.display-7

gesetzt. Das würde dann Deine allgemeine Größenangabe für den Body wieder überschreiben, weil es direkt am Text steht.

... und ja, Breakpoints werden von Mobirise erkannt und eigentlich überall gesetzt. Du hast das vollkommen richtig geschrieben. Du hättest jedoch wahrscheinlich Erfolg im <head> mit:

Code:
<style>
   @media (max-width: 599px) {
       .display-7 {
           font-size: 0.8rem;
       }
   }
</style>

... es wird dann aber erst nach dem Publizieren angezeigt. Soll die CSS gleich auch in der Arbeitsansicht wirken, dann müsstet Du die CSS (ohne das <style> Tag) direkt in den Bereich "CSS Editor" vom "Code Editor" schreiben, also dann so:

Code:
   @media (max-width: 599px) {
       .display-7 {
           font-size: 0.8rem;
       }
   }

Dann wirkt das aber nur für diesen Block.

Das ist bei Mobirise manchmal nicht so leicht zu erkennen oder zu beeinflussen, da es immer ganz abhängig vom jeweiligen Style ist.

Man müsste für die Beantwortung solcher Fragen immer besser eine Testseite online sehen, damit man in den Quelltext gucken kann.

Vielleicht ist es sinnvoller, wenn man auf so lange Worte nicht verzichten kann, diese mit einem Zwangsumbruch in der Media-Abfrage des betroffenen Blocks zu versehen, also z.B. so:

Code:
word-break: break-all;

Man kann auch ganz gezielt lange Worte bei Platzmangel mit dem HTML-Tag <wbr> trennen, also das Wort "Informationen" z.B. so:

Infor<wbr>mationen

... hier findest Du ein Beispiel in diesem horizontalen Akkordeon von mir:

http://www.mobirise-tutorials.com/Lawyer...rdeon.html


P.S.:

hier hatte ich auch schon mal was zu sehr langen Wörtern in Mobirise geschrieben:

http://www.mobirise-tutorials.com/word-wrap.html
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Hallo Tommy,
danke für das herzliche willkommen hier im Forum Rolleyes 

deine ausführliche antwort hilft mir schon sehr weiter  Smiling !

Gibt es irgendwo eine Referenz für Mobirise-Tags und Klassen?
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
... nein, die stehen hauptsächlich in z.B. diesen Dateien.

... für das Thema:

assets/theme/css/style.css

http://www.mobirise-tutorials.com/Busine.../style.css

... für die Blöcke:

assets/mobirise/css/mbr-additional.css

http://www.mobirise-tutorials.com/Busine...tional.css

... und dann verwendet Mobirise natürlich in allererster Linie die CSS von dem Framework "Bootstrap":

https://getbootstrap.com/docs/4.2/gettin...roduction/
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren




Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!