Question: 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/>
`@media screen and (max-width : 760px)` (for tablets and phones) and use with this: `<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">`