Question

I just asked a question about centering elements, and given what I had to do with that (wrapping several elements with another element just to get them to display similarly to Apple’s layout and having to specify a width in order to center the ), how exactly do they get the site to work so nicely on mobile devices? Is there something I’m doing wrong? Here is the CSS I’m using for my page.

body
{
font-size: 80%;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
color: #000000;
background-color: #E4E0E0;/*;*/
/*background-attachment:fixed; used to fix a background image so only text scrolls*/ 
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;  
}

.wrapper
{
margin:auto;
width:950px;
}
.homediv
{
background-color:#F7F7F7;
border:1px solid #FFFFFF;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
/* width must be defined in the actual element */
-webkit-box-shadow: 0px 0px 8px #888888;
-moz-box-shadow: 0px 0px 8px #888888;
box-shadow: 0px 0px 8px #888888;
text-align:center;
padding:4px;
 }

.homediv:hover
{
background-color:#FFFFFF;
cursor:pointer;
}

.homediv img
{
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
}

What do I need to change in order to make the site automatically fit on screen sizes? The way it’s currently set up, I have to specify widths within the elements themselves…

Answer 1

They probably use CSS Media Types and Media Queries to use different stylesheet(s) depending on the media it’s being presented on (e.g., screen, handheld).

There’s a great article on ALA which prominently feature these techniques: “Responsive Web Design”.