user1636968 user1636968 - 1 month ago 38
CSS Question

Making div content responsive

My content isn't responsive at the moment. I've tested it on iPhone and the text goes over the screen.

I've changed the CSS of my container to:

#container2 {
width: 960px;
max-width: 90%;
position: relative;
left: 50%;
margin-left: -480px;
line-height: 1.4em;
}


When I test it after the change, the content disappears. I read that putting max-width:90%; would allow it to not exceed the boundary width (http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design) but obviously it didn't work. What am I doing wrong?

Answer

try this css:

/* Show in default resolution screen*/
#container2 {
width: 960px;
position: relative;
margin:0 auto;
line-height: 1.4em;
}

/* If in mobile screen with maximum width 479px. The iPhone screen resolution is 320x480 px (except iPhone4, 640x960) */    
@media only screen and (max-width: 479px){
    #container2 { width: 90%; }
}

Here the demo: http://jsfiddle.net/ongisnade/CG9WN/