Anpassung "responsiv" / Smartphones

vellvee

Liebes Forum,
leider bin ich über die Suche nicht weitergekommen (oder ich habe falsch gesucht, "sorry" vorab) - jedenfalls habe ich das Problem, dass ich nicht weiß, wie ich in Mobirise die Seiten für die Ausgabe auf Smartphones optimieren kann. Z.B. werden Headlines unschön umgebrochen etc.pp.
Ist dies anpassbar bzw. gibt es dazu eine Anleitung / Tutorial?
Ich muss gestehen, programmieren kann ich nicht, natürlich kann ich via dem HTML Editor entsprechende Änderungen durchführen. Ich habe die Version Mobirise 5.7.8 und habe das "All Mobirise Themes & Extensions Kit (yearly)" abonniert.

Für Infos, Tips und Hinweise bedanke ich mich vorab

Grüße, Vellvee

Hallo Vellvee,

Du brauchst eigentlich bezüglich dieser responsiven Anpassung in Mobirise gar nichts machen.

Es wäre wünschenswert Deine Seite online zu sehen, um Dein Problem erkennen zu können und entsprechend einen Ratschlag zu geben.

Hast Du die Seite noch nicht online, solltest Du diese eben in ein Testverzeichnis publizieren, das Du meinetwegen ja auch noch mit einer .htaccess Datei schützen kannst, sodass die Seite nicht von den Suchmaschinen gefunden werden kann.

Man kann wirklich nicht helfen, wenn man das nicht sieht - das ist immer wieder der gleiche Fehler, der immer wieder von vielen (fast allen) Leuten gemacht wird.

Eine Headline kann natürlich auch zu lang oder viel zu groß sein und dementsprechend schlichtweg nicht genügend Platz am Smartphone haben. Dann muss man diese anders gestalten oder eine kleinere Schrift wählen.

Der Begriff "Supercalifragilisticexpialidocious" von Mary Poppins passt auch in keine Headline

... was Du mit et cetera / perge, perge etc. meinen könntest - kann auch niemand hier erraten

Na ja,
wenn Du den Code-Edi hast, kannst Du mal in den Site-Settings -> Global-HTML Insert -> Before /head code diese Zeilen eintragen für automatische Silbentrennung (in deutsch)

Code: Alles auswählen

<style>
body { hyphens: auto;-moz-hyphens: auto;}
</style>

struggle

Schau Mal hier:

viewtopic.php?t=1092

Da habe ich das gleiche Problem beschrieben, das ich dann mit einer Media-Anweisung lösen könnte. Das gilt nicht nur für Überschriften, das kann man mit jedem eingefügten Text machen.

Ansonsten habe ich mich bei den Überschriften von allen langen Namen verabschiedet. Das hat am meisten geholfen.

Nun noch der Hinweis von stobi zur Silbentrennung (den ich auch nicht kannte), mehr geht nicht.

Moin,

wobei "Vellvee" ja von einer Headline (Überschrift) spricht, die man ja generell ungern trennt. Da wäre dann sicher eine kleinere Schrift angebrachter.

... man sollte vielleicht dann auch noch erwähnen, dass für diese Silbentrennung auch das HTML-Sprach-Tag vorhanden sein muss, also:

<html lang="de">

damit der Browser überhaupt die Sprache für die richtige Trennung kennt.

Man könnte die Sprache aber auch nur einem bestimmten Absatz zuordnen:

Code: Alles auswählen

<p lang="de"> Inhalt vom Absatz </p>

Das mit der Silbentrennung - und ein wenig mehr dazu - steht übrigens auch hier beim Werner beschrieben:

https://werner-zenk.de/css/silbentrennung.php

Ich glaube der Präfix für den "Firefox" Browser (-moz-) wird inzwischen auch nicht mehr benötigt, es reicht dann nur:

hyphens: auto;

(hyphens = Bindestriche)

also als Style-Tag dann so:

Code: Alles auswählen

<style>
p {
 hyphens: auto;
}
</style>

Es wäre in Mobirise aber schon etwas eleganter dafür kein eigenes Style-Tag zu setzen, sondern das in die globale CSS vom "Code Editor" (am "Style-Pinsel" Symbol unten rechts auf jeder Seite) einzutragen, also z.B. dann am <p> oder eben auch am <body> Tag, wie in diesem Screenshot zu sehen:

Da gibt es dann auch noch so etwas wie diese CSS-Eigenschaften:

word-wrap: break-word;

https://www.w3schools.com/cssref/css3_pr_word-wrap.php

oder auch

word-break: break-all;

https://www.w3schools.com/cssref/css3_pr_word-break.php

oder auch

word-spacing: 30px;

https://www.w3schools.com/cssref/pr_tex ... pacing.php

vellvee

Liebe Antwort-Geber!
Ihr seid die Besten

Vielen lieben Dank für eure wertvollen Tips und Informationen. Ich werde alles mal nach und nach testen. Den ersten Tip mit Eintrag in die Erweiterungen habe ich ausprobiert und festgestellt, dass es in manchen Browsern schön getrennt wird, in anderen ändert sich nichts. Aber ist wohl normal, das bekannte "Browser-Thema".

Einen sonnigen Tag allen,
viele Grüße,
Vellvee

Mobirise-Tutorials.com

Anpassung "responsiv" / Smartphones

Anpassung "responsiv" / Smartphones

Re: Anpassung "responsiv" / Smartphones

Re: Anpassung "responsiv" / Smartphones

Re: Anpassung "responsiv" / Smartphones

Re: Anpassung "responsiv" / Smartphones

Re: Anpassung "responsiv" / Smartphones

Wer ist online?