Responsive Twenty Ten

Responsive child theme for default Twenty Ten. Provides fluid layout for many browsers including mobile support for iPhone, iPad and Android. Being a child theme, it is dependent on the Twenty Ten theme as a parent.

Full

Medium & Single

Images with an alignleft class will switch to aligncenter on mobile so we don’t end up with any weird text wrapping.

Kristin Baker - Centre Pompidou

Youtube – This will not show up on iPad…

Vimeo

One thing that we have played around with was the way videos respond in the theme. By using CSS to control img { max-width: 100% } you are allowing the images to scale all the way down to mobile devices. The problem occurs when you want to add video from vimeo or youtube. They are wrapped with iframe, embed or object along with a height and width attribute.

In order to make the videos more responsive we added a bit of css to our style.css:


iframe, object, embed{
max-width: 100%;
}


We then added the following for our media queries. This helps the videos scale better on mobile devices

iframe, object, embed{
width: 100%;
height: auto;
}


So our media queries would look like this:

/* Media = Mobile - iPhone */

@media handheld, only screen and (max-device-width: 480px) {
iframe, object, embed{
width: 100%;
height: auto;
}
}

/* Media = Mobile - All Others - orientation:portrait */

@media handheld, only screen and (max-device-width: 480px) and (orientation:portrait) {
iframe, object, embed{
width: 100%;
height: auto;
}
}

/* Media = Mobile - All Others - orientation:landscape */

@media handheld, only screen and (max-device-width: 767px) and (orientation:landscape) {
iframe, object, embed{
width: 100%;
height: auto;
}
}