Hoe kan ik de tekstgrootte aanpassen aan de grootte van een div?

Zie: welenhoeck.byethost14.com/jml/ Het gaat hier om de divs left en inhoud. Hoe kan ik ervoor zorgen dat de grootte van mijn tekst aangepast wordt aan de grootte van mijn divs? Dus als ik mijn site vb. met een smartphone wil bekijken wil ik dat de tekst kleiner weergegeven wordt. Hoe kan ik dit instellen? Kan dit met Css of javascript?
Ik merk ook dat de inhoud op een smartphone te breed wordt weergegeven. Het moet passen binnen die kantlijnen.

Ik vind niet hoe ik mijn eigen forumbericht kan aanpassen. Dus geef ik hier nog meer info.
Ik ben vertrokken van een blanco template, zie blank.vc/

Ik zie al heel veel inline opmaak en vaste breedtes in pixels ipv percentages. Daardoor zal bijv. de content niet juist meeschalen.
Ik zie ook dat de gegevens allemaal ca 2 jaar oud zijn. Is dat wel zo verstandig?
Er zijn volgens mij wel betere (gratis) templates te verkrijgen, die je ook kunt aanpassen aan je wensen.
En anders je misschien eerst meer verdiepen in css en responsive.

In Joomla zit al Bootstrap 2 verwerkt maar als je nu toch bezig bent zou ik eens kijken naar Bootstrap 3 want die heeft voor het mobiele weergeven veel meer mogelijkheden.
En een zoekmachine is altijd een goede vriend

Ik zie al heel veel inline opmaak en vaste breedtes in pixels ipv percentages. Daardoor zal bijv. de content niet juist meeschalen.

Waar zie je dat juist? Kun je hier voorbeelden van geven (broncode)? Ik gebruik wel javascript om breedtes aan te passen. De randen worden bij mij wel al goed weergegeven en het logo. Het is nu nog enkel het menu en de inhoud dat moet aangepast worden. Dus de volgende divs worden op mijn computer en mijn smartphone al goed weergegeven: achtergrond1, achtergrond2, top

Ik zie ook dat de gegevens allemaal ca 2 jaar oud zijn. Is dat wel zo verstandig?

Aan welke code kan je dat zien?

met 2 jaar oud bedoel ik de gegevens van de template waarnaar je verwijst.

Zet in je template bij .img eens de toevoeging "width: 100%;"
Volgens mij gaat het dan goed.

Inline opmaak: als je de site inspecteert met fire-bug (add-on browser Firefox) zie ik regelmatig "element-style" terwijl je dat allemaal via je .css zou moeten/kunnen regelen.

Ik heb toch css-code gevonden dat werkt. In mijn template.css heb ik alvast volgende code:
Hoe kan ik deze groottes herdefinieren met bovenstaande waarden?
Bron: www.w3schools.com/jsref/prop_style_fontsize.asp
Property Values
Value Description Play it
medium Sets the font-size to a medium size. This is default
xx-small Sets the font-size to an xx-small size
x-small Sets the font-size to an extra small size
small Sets the font-size to a small size
large Sets the font-size to a large size
x-large Sets the font-size to an extra large size
xx-large Sets the font-size to an xx-large size

Het lijkt mij voor de gebruiker beter dit om een tekst groter of kleiner weer te geven!

De template vanuit waar je bent vertrokken is een template gebaseerd op Less. Let dus op dat je nooit de less-compiler gebruikt als je nu het template.css aan gaat passen! De gemaakt instellingen zullen worden overschreven. Ik zou op safe spelen en een andere css maken en deze koppelen. Of nog beter: met less gaan werken ipv css.