Create Interactive Content

Question

My content is not responding at the moment. I tested it on the iPhone and the text is viewed on the screen.

I 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 setting max-width: 90%; would allow it to not exceed the border width ( http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design ), but obviously this did not work. What am I doing wrong?

Answer 1

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's a demo: http://jsfiddle.net/ongisnade/CG9WN/

Answer 2

Not much, but I think you want to flip the width and max-width values:

 #container2 { width: 90%; max-width: 960px; /* etc, etc... */ } 

This will give you a container that is 90% of the width of the available space, up to a maximum of 960 pixels, but depends on whether it changes itself. However, the responsive design is a whole big ball of wax, so it does not even scratch the surface.

Answer 3

@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">