Versucht eure Webseite auf einem mobilen Endgerät mit begrenztem Display aufzurufen.

Bei einigen Seiten (so zum Beispiel hier auf meinem CodeCave Blog als das Theme noch unoptimiert war) rutschen Navigationselemente wild im Bild herum. So lag meine rechte SideBar plötzlich unter dem Content.

Das ist ein designtechnisches Disaster.

Folgendes Bild zeigt exakt was ich meine:

Mit CSS für mobile Endgeräte optimieren (per Hand)

Das Problem habe ich ganz schnell in Griff bekommen können, mit ein wenig CSS Code, diesen möchte ich euch hier bereitstellen.

@media only screen and (max-device-width: 480px) {
	#content,#content_ns {
			width:620px;
		}   
	}

Diesen Code UNTER die “normalen” Einstellungen für Desktop-Monitore setzen, damit diese im Fall eines Mobilgerätes überschrieben werden können.

Bei einem Endgerät wird hier die Content-DIV-Spalte via ID auf 620px herabgesetzt, damit sich nichts untereinander verschiebt.

Leider kann ich nicht explizit darauf eingehen, ich hoffe ihr seid erfahren genug, ihn selbst zu verstehen.
Wirklich kompliziert ist er nicht.

Weitere Code-Snippets und Tricks finden sich im CODECAVE Cheat SHEET: HTML + PHP + MySQLi + Jquery