Zeilenumbruch bei <li> Containern nebeneiner

[milanwb]

Hallo,

ich bin grade dabei mir ein Frontend mit TabletUI zu basteln.
Dabei läuft das Frontent über einen Apache mit PHP und verbindet dann zur FHEM auf dem selben System.

Hierbei habe ich mir gedacht, dass ich eine Website komplett erstelle, welche dann ALLES für alle Geräte beinhaltet - wo man dann zur Not auch mal Scrollen muss.
Dazu will ich je eine "Startseite" für die einzelnen Geräte optimiert erstellt, wo dann nur die persönlichen Favoriten drinnen sind und entsprechend für das Gerät optimiert ist.


Nun habe ich folgendes Problem bei der Darstellung:


Das Layout funktioniert so wie es soll nebeneinander (PC.png) auf dem PC und auf dem Tablet.

Wenn jedoch das Display zu klein ist, dann SOLL hier ein Horizontaler Scrollbalken entstehen. Stattdessen klappt die 2. Box jedoch ein.

Hab ich hierbei eine Einstellung übersehen? Hier ein Auszug aus dem Header.
CSS Mäßig hab ich schon einiges probiert, jedoch nie mit Erfolg!

Code Auswählen Erweitern



<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
<meta name="widget_base_width" content="116">
<meta name="widget_base_height" content="131">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="fhemweb_url" content="http://192.168.22.10:8083/fhem/">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- 1=output to console;0=no output -->
<meta name="gridster_disable" content="1">


Vielen Dank für eure Hilfe!