Don't Forget TwentyEleven's Responsive Structure When Customizing

I took a look at VoodooPress today on my phone, and you know what? It looked downright butt nasty! Just a few things were out of place, but it was bad. Twentyeleven has a responsive structure built right in. If you forget to account for it, your site may look bad too! Here’s a few quick fixes.

Now I’m not going to account for everything in this little discussion. I just want to help you to understand my thought process, then you can think the same way and get your site fixed. First thing first, how does your site look on a smart phone? How about a tablet? Check it out? I thought I was being smart by setting up my child theme, and I was. But I didn’t think everything through.

The two items that really looked bad were my tagline, and my under post widget area.

First up, here’s the css I added to my child theme, let’s look, then talk!

@media (max-width: 650px) {
	.post-widget-area {
		overflow: hidden;
	}
	#site-description {
		display: none;
	}
}
@media (max-width: 450px) {
	.post-widget-area {
		display: none;
	}
}

That solved the majority of my problems. Basically, at around 650px, my adsense ad atarts to bust out of its area and overlaps other content. It’s a close fit, but not perfect. So I just hide the overflow. That way the majority of the ad can be seen, but the excess is hidden. However, at smaller resolutions, the ad is pretty much useless, so we totally hide the widget area.

The next problem is that I repositioned my tagline over the header image. At smaller resolutions, it looks terrible covering up the entire header. So I just hide it completely. Instead of doing that, I could have bumped my entire site down a bit, and repositioned the tagline at the top, shrinking down the text. I may still do that, but right now, my problems are fixed.

So there you have it. Nothing too in depth, but something to consider for sure. The authors of twentyeleven went to a lot of work to make sure your site looks good at any resolution. I think it’s pretty important to keep it that way. Test your site, and be creative. You can move things around, adjust sizes, hide things, etc.

4 Replies to “Don't Forget TwentyEleven's Responsive Structure When Customizing”

  1. hey hey, so I have got a question. I too created a child theme, and it looks fine on my regular browser but terrible on my phone…

    Should I make those above edits in the css stylesheet? Can I just remove the responsive resizing function altogether?

    Any help or direction that you might have would be greatly appreciated.

Leave a Reply