Tabellen op mobiele telefoon

Probleem met tabbellen
rasasenang.com/nl/indonesische-afhaalgerechten/56-afhaaltest
Werkt prima op mijn scherm, tablet maar op een mobieltje komen de prijzen onder de tekst te staan. Heb al van alles zitten proberen, zonder succes...

<p style="width: 300px; float: left; margin-right: 10px;">19 Soto Ajam (klein)<br />

<p style="width: 30px; float: left; margin-right: 10px;"><span style="color: #ff0000;"><strong>2,00</strong></span><br />

Gedaan zoals bovenstaand...

John

Als ik het zo zie zijn het meer kolommen die je hebt gemaakt dan een tabel.
Voor een responsive tabel: kijk hier eens.

Je hebt nu twee <p>'s naast elkaar gezet, wat helemaal niet mag, door de eerste te dwingen 300 pixels en de tweede 30 pixels breed te zijn. Beide hebben ook nog een ruimte gekregen van 10 pixels aan de rechterkant. Als het scherm nu smaller is dan het totaal van beide paragrafen dan schuift de <p> met de prijzen onder de <p> met de gerechten.

Mijn advies is om een laag <div> te maken van 350 pixels. Daarin maak je weer twee lagen en de eerste maak je 310 en de tweede 40 pixels. In de eerste laag zet je het gerecht en in de tweede het bedrag. En dat herhaal je zo voor ieder gerecht en prijs.

Als nu het scherm te klein word om het naast elkaar neer te zetten dan schuift de prijs onder het gerecht en is het nog wel duidelijk en op een groot scherm ziet het er nog steeds netjes uit.