Twentyfourteen Sidebar Bug

After updating to WordPress 3.8 I was keen to give the new Twenty Fourteen theme a try. I’ve been using a modified twenty eleven theme forever so thought a change would do me good! Within an hour I had changed the default green accent colour to match our company blue, made sure our contact-form plugins still worked, and got everything looking perfect on my testing site. My pointer hovered over the Publish button, but I decided to give it a quick check on the iPad. Just in case.

It looked great. The responsive layout was beautifully readable, and everything looked fresh and new. There was a slight, but game-stopping problem though.

The Content Sidebar Became Unclickable!

Some of the media queries that control the responsive layout had clashed and caused widgets within the content-sidebar to become unclickable at certain viewport sizes. In my case this was the contact form we have on every page, so losing the ability to fill the form is pretty bad news! I checked on the desktop version of Safari and found the same problem if I reduced the window to approximate iPad size. I couldn’t replicate the problem in Firefox at all.

For reference I was able to find the culprit. Two lines of CSS.

On line 3186 I changed width:100%; to width:66.66666666%;

On line 3192 I changed margin-right: 33.33333333%; to width:100%;

This fixed the unclickable problem, but caused a bit of overlap elsewhere with another media query so:

On line 3578 I changed:

margin-left: -29.04761904%;
width: 29.04761904%;

to:

margin-left: -25%;
width: 25%;

Remember that changing the live-version of the theme is a bad idea, as the changes can get overwritten by theme updates. I changed it in my child-theme instead.

I’m pretty sure this breaks a bunch of conventions that were used in the development of the theme (I hated changing the specific -29.04761904% to a generic -25%) , but it works for now, and that’s what matters. I couldn’t find the correct place to post theme-related bugs to WordPress, so have posted it here for posterity. I will probably have a look at fixing this more cleanly soon, as I suspect there is a quicker fix that I’m not seeing. Especially as this doesn’t seem a problem on Firefox. z-index maybe?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.