CSS instelling font voor Mobiel

[Piet Barendregt]

Mijn vraag
Hoe verhelp ik dat letters op mobiel door elkaar staan? (zie afbeelding onderaan)

Relevante software en hardware die ik gebruik
SublimeText + HTLM + CSS

Wat ik al gevonden of geprobeerd heb:
script gemaakt in CSS voor verschillende devices :

Cascading Stylesheet:

body { 

    background-color: #00E0FF ;
    font-family: arial, sans-serif; color: black;
    line-height: 5px;
}

h1 { font-size: 16px;}

h2 { font-size: 12px;}

p { font-size: 10px;}

@media all and (min-width: 520px) {

html { font-size: 60%; }

h1 { font-size: 14px;}

h2 { font-size: 12px;}

p { font-size: 10px;}

}

@media all and (min-width: 980px) {

html { font-size: 80%; }

h1 { font-size: 20px;}

h2 { font-size: 14px;}

p { font-size: 12px;}

}

@media all and (min-width: 1260px) {

html {font-size: : 100%;}

h1 { font-size: 24px;}

h2 { font-size: 18px;}

p { font-size: 16px;}

}

html { font-size: 62.5% }

h1 { font-size: 16px; font-size: 1.6rem;}

h2 { font-size: 12px; font-size: 1.2rem;}

p { font-size: 10px; font-size: 1.0rem;}

}

[ Voor 0% gewijzigd door RobIII op 14-11-2021 01:06 . Reden: Wederom: Gebruik code tags a.u.b. ]

[Nila]

Wordt veroorzaakt door de lineheight van 5px op je body.

[RobIII]

Beste @Piet Barendregt,

Al eerder vroeg ik je vriendelijk om code tags te gebruiken. Ook wees ik je op de quickstart en legde ik uit waarom we graag zien wat je zelf al gezocht, gevonden en geprobeerd hebt. Ik snap dat je code post die niet werkt en dat je dat dus "geprobeerd hebt", maar het gaat er natuurlijk om dat we graag zien wat je geprobeerd hebt (en gezocht hebt) om dat probleem op te lossen.

Ook vroeg ik je om relevante(!) code; met alleen CSS kunnen we (op wat (educated) giswerk na) niet heel veel als je niet ook een beetje HTML post (je ziet hier ook 3 mensen om relevante code vragen). Het helpt als je een complete testcase post waarin je alle overbodige zaken hebt verwijderd - niet alleen voor ons maar ook voor je zelf helpt het om op je probleem "in te zoomen" tot je de dader te pakken hebt. Dit is een testcase. En dit zou dan volstaan om te posten in je topic:

Cascading Stylesheet:

body {
    background-color: #00E0FF;
    font-family: arial, sans-serif;
    line-height: 5px;
}

HTML:

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam phasellus vestibulum lorem sed risus ultricies tristique nulla. Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna neque.
</p>

Zoals je ziet had je waarschijnlijk je eigen vraag al kunnen beantwoorden als je even 'terug naar de basis' was gegaan; steeds verder 'uitkleden' net zo lang tot je tot de essentie bent teruggekeerd en dan staart de dader je waarschijnlijk in 't gezicht.

Je hebt 't antwoord dus hier kunnen we 't bij laten maar ik wil je dus wel vriendelijk, maar met klem, verzoeken voortaan de voorgenoemde quickstart te hanteren wanneer je een nieuw topic opent.

Oh, en, ja ik weet dat we veel regeltjes hebben, maar zorg dat je een testcase / screenshot ook ontdoet van (merk)namen, url's etc. (want irrelevant voor je vraag) want anders kon 't nog wel eens voor spam aangezien kunnen worden. Er is vast geen kwade of commerciële bedoeling in 't spel - maar voor jou 10 anderen die dat wél hebben en dús trekken we de lijn voor iedereen gelijk

[ Voor 12% gewijzigd door RobIII op 14-11-2021 01:29 ]