Responsive Comment FormsMay 29, 2013
After you make the front page of your theme responsive (see my previous post), you need to check the other templates. And one area that might break your theme, and resists the simple CSS-media-queries method, is the comments form, typically loaded on the single post template.
That’s because forms tend to have fixed widths, and whats more, the width is defined by with inline HTML, or at least its defined that way by default in the Wordpress comments template. The template outputs the following HTML for the Name field:
size="30" is what controls the width. I don’t know what units this is in.. thirty characters maybe? In any case this is impervious to CSS. There is a way to make this responsive however, and it goes back to the template hook that loads the comment forms:
comment_form();. It turns out that you can override the default options quite easily (see the Wordpress codex). What I do is use an
if (is_mobile()) statement to load a smart phone size comment form, and an else statement to load the non-mobile, default comment form. The code is rather long, but here it is:
Just replace the
comment_form(); hook in your theme with the above code. And BTW, it won’t work unless you have the Mobile Client Detection Plugin installed. That’s what lets you use the
What this code is doing is defining smaller textarea fields if the user agent is ‘mobile’. See the
size="27" parts? that’s the key. And for the big textarea, I use cols=”28”. These numbers may be “magic numbers”, i.e. they just happen to fit my theme with the font I use, but its no worse than the bad magic numbers that were in there before.