How to optimize CSS to fit mobile devices screens ;)

So I’ve changed the design of my blog here, and see what happens, when I surf it on my iPhone 6+?
I’ve took a little screenshot for you for demonstration:
iphone-codecave-problem-css-solve-yeah

 

Damn dude thats ugly, lets fix it!

Fix is fast and easy AND clean to implement via CSS.

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

Be sure to put that code under the “normal” code so it can replace the sizes for desktop monitors.

Here we let CSS find out if the user’s using a mobile device to surf this site. If that is the case, we just adjust the #content and #content_ns IDs to 620px so it all fits well again. Here we go.

Leave a Comment