table-cell + css display:block;word-break:break-all;

[digitalwerk]

Hallo Forum, Besucher + Nutzer,

Probleme mit CSS und Text Inhalt im Mobilen Bereich, der Desktop Bereich 100 % OK. Alle Unterseiten (in meiner Angabe "Instrumente" : problematische Seite)

Folgend sind Divboxen gestaltet :

Quelltext hier
<!-- // Tabellen DIV Boxen Starter \\ -->
<div class="table">
<div class="table-row">
<!-- // Tabellen ZELLE Links DIV Boxen Starter \\ -->
<div class="table-cell LinksA">
123
</div>
<!-- // Tabellen ZELLE Mitte DIV Boxen Starter \\ -->
<div class="table-cell">
<h1>Überschrift</h1>
Alexandre Pere et Fils wurde als Harmoniumbauer auf der ersten franz&ouml;sischen Weltausstellung ausgezeichnet mit der Ehrenmedaille "Medaille Honneur Exposition Universelle de 1855 Paris".
    <br><br>
    Baujahr zwischen 1872-1877, Rue Richelieu 106, Paris, Instrumentennummer 107037 
    Geh&auml;use Palisander, Breite 108 cm, Tiefe 43 cm, H&ouml;he 84 cm, Stoff blauer Samt 
    Einstimmig, Flute 8 Fu&szlig;, einzelne Klangzungen, Tastaturbelag Knochen 
    Registerz&uuml;ge
    <br><br><br>
    <br>
... (bla bla bla Text)<br>
</div>
</div>
<div class="table-cell RechtsB">
<!-- // Tabellen ZELLE Rechts DIV Boxen Starter \\ -->
123
</div>
</div>
</div>
</div>
</body></html>

Hinweis : Der Code gilt nur zum Verständnis - bitte guckt bei der Problematischen Seite in den Instrumenten Unterseiten

Viewport @media only screen and (max-width: 1010px) { .table {border:none;} .table-row,.table-cell {display:block;word-break:break-all;} .table-cellM {} .table-row {margin-bottom:20px;} }

Soweit so gut, die Anweisung CSS " display:block;word-break:break-all; " bricht für die Mobilen Geräte jeweils die Linke + Rechte + Mitte Spalte (untereinander).

Bis hier hin ist auch soweit alles OK, doch der Mitte Text, wird in seinen Zeilen umbrochen und Buchstaben abschnitten.

bsp: ersten französischen

erste n französ ischen

Im Desktop Bereich ist alles soweit Gut und OK, nur der Mobile Teil macht seine Probleme mit dem Mittleren Text.

Ich hatte gar versucht eine Divbox extra um den Text zu legen, doch der Viewport greift nicht und den Text kleiner als 9px zu machen, halte ich für insb. Smartphones als überhaupt nicht Sinnvoll.

Seite unter "http" ** nicht **die Index Seite - sondern die Unterseiten (Instrumente)

(Live : Siehe Problematische Seite )

Suche Hilfe, wer weiss hier eine Abhilfe ?