Search Engine Optimization & Online Marketing

How To Make The WordPress Twenty Eleven Theme Fully Responsive

Since the Google’s mobile update recently rolled out, I decided to update my salsa team’s website from the Twenty Ten theme which I’d been using to Twenty Eleven, which is very similar in terms of design, but more mobile friendly.

Aside from transferring over some of the customizations I’d made to the previous theme, I had to make a few tweaks to the theme to make it fully responsive.

If you are moving to the Twenty Eleven theme or are currently using Twenty Eleven and want to make it more responsive, here are the steps I took:

1) Make The Menu Responsive

The menus in Twenty Eleven don’t scale very well for mobile, especially if you have a lot of navigational items in them.

The solution I found was to install the nifty Responsive Menu plugin. This plugin creates a slick looking menu that opens up when you tap on it, similar to the Facebook app. It pretty much works out of the box, and the only thing I had to change was the title.

The next thing that I did was add the following CSS code under the @media (max-width: 450px) block of CSS code:

#access {
display: none;
}

This makes it so that the old navigation is hidden on smaller screens, leaving only the slick new nav.

2) Make Images and Videos Scale Properly

Images and embedded videos in Twenty Eleven scale properly in terms of width, but the height does not scale, making the images look squished. The solution is to add the following CSS code:

This sets the height of images to “auto” so that they scale properly on mobile. Just add the above code to the bottom of the CSS file.

3) Fix the Padding on the Title

This one is optional, but in my opinion the default Twenty Eleven has way too much white space in the header, pushing all the content below the fold. The solution is to set the padding of #site-title to 1em from the default. Change it for both the desktop and mobile version of the CSS, and you’ll have a much narrower header so that readers can get right to your content.

Conclusion

I’ve been putting off moving my site to mobile for a while, but in this case the move to a mobile-friendly theme turned out to be a relatively painless process that took less than an hour. As you may know, I’m not a huge fan of responsive design, but in this case it was a quick and easy solution for getting my blog mobile.

Hope you found that helpful, and leave me a comment if you have any questions.

Takeshi Young is an SEO and online marketer with 6+ years of experience in the industry. His specialties are technical SEO and social media marketing. He is also passionate about salsa dancing, and performs and competes around the country.

Thank you SO MUCH for the clear detailed instructions so that somewhat-novices have a chance at making this work. This is EXACTLY what I have been doing a search for all afternoon and this is perfect – well almost.

You wrote regarding fixing the padding in the title: “The solution is to set the padding of #site-title to 1em from the default. Change it for both the desktop and mobile version of the CSS.”

I’m assuming this is where it is to be changed:
#header {
padding: 30px 0 0 0;

BUT…I don’t know what you mean to change it “for both the desktop and mobile version of the CSS”? HOW is that to be done? THANKS AGAIN!!!!