user1636968 user1636968 - 9 months ago 92
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 Source

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/