Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Nathan F.
Nathan F.
30,773 Points
Posted by Nathan F.
Nathan F.
30,773 Points

Help making Twenty Twelve child theme properly responsive

I've created a custom child theme based on Twenty Twelve to use for my friend's website and am having some issues, particularly with mobile (iPad and iPhone), but also on window resize. The site in question is at www.cheemanyc.com

On browser resize, or on mobile, the head banner properly resizes. However, elements I have added or styled myself, such as the email form, nav bar, and teaser banner do not properly scale.

I am using rem values with pixel fallbacks, which seem to be the recommended units for Twenty Twelve.

My friend would like to preserve the layout as much as possible between desktop and mobile browsers and keep the menu from being pushed around on resize.

So, what am I doing wrong at present, and what is the recommended way to fix it? Should I use media queries? Another size property (EMs)?

As I understand it, Twenty Twelve is a mobile-first theme. Where is the documentation for the theme itself contained?

Thanks in advance.

3 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

I don't think you're going to find documentation on the responsive nature of the theme, except for inspecting it in the browser. I have also found issues with exact custom media queries in Twenty Twelve. Sometimes I wished I used another theme, but it is possible with your own custom queries to override and do what you need. Hope this helps?!

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Yeah, my experience was it looked okay at very specific sizes, but in between them funkiness would ensue. When we design in the browser we pay so much more attention to the states in between the normal mobile, tablet and browser sizes. Unfortunately, besides tweaking it I don't have too many suggestions.

Although, if you were able to come up with a master child theme media queries reset/starter stylesheet that others could use, it would be pretty awesome :)

Nathan F.
Nathan F.
30,773 Points
Nathan F.
Nathan F.
30,773 Points

That sounds like a project worth tackling. :) Especially given the amount of headaches the default one is giving me. If I happen to make such a thing, I'll be sure to let everyone know.

Nathan F.
Nathan F.
30,773 Points
Nathan F.
Nathan F.
30,773 Points

Hey Zac,

Thanks for the help. I also think that I could probably fuss with the queries to get it to do what I need it to do. But the thing perplexing me is why I should have to muck around with it at all--it feels like I shouldn't have to. For instance, the #teaser img banner is a child element of the Wordpress main content div. As a fix, I tried setting the image width to 100%, and position relative. I've also tried setting height to auto, or leaving it undefined, with similarly no result.

I thought that doing the above would constrain the size/width of the image to its container element--in this case, the content div, and therefore it'd resize all on it's own. Have I confused some basic fundamental? My result should be something like #2 in this sandbox: http://clagnut.com/sandbox/imagetest

Curiously, I just noticed that at 600px and above, the cutoff for the media query, my banner image displays as expected, or else crops off the overflow (undesired, but expected at this point). However, once I horizontally shrink my browser window as much as Chrome will allow, my banner image displays the full 960px image--it stops cropping the overflow.

I'll play around with the media query and see how that changes things, but still curious to understand why it behaves this way.