Twenty Thirteen: Form elements aren't equal when on mobile

[karmatosed]

I've attached an image which is due to a px fixed width:

#commentform input[type="text"] {
width: 270px;
}

This could become a % on mobile to get it more even.

I'm marking as enhancement as would need a check with the designer before applying anything as to if they want to.

[lancewillett]

@karmatosed I think it'd be a great improvement to make this percentage based widths instead of pixels. Do you want to cook up a patch for it?

[karmatosed]

Percentages rather than a fixed form width size

[karmatosed]

I've just updated with a patch for percentages. We may want to adjust this a bit but it puts the foundation in and gives us the option of varying as it scales down.

[lancewillett]

Thanks for the patch! I'll be testing this early next week.

[obenland]

I like the direction of the patch! I think we can cut down on a lot of selectors if we set it to a width of 60% and give it a max-width of 270px per default. What do you think?

[karmatosed]

I'm not sure that gives the equal length we want in mobile. Ideally that would be 100%. It's tricky I understand wanting to have less selectors also.

[obenland]

You're right. We could add a selector withwidth: calc(100% - 100px); in the 643px media query. This would leave us with the 60% as a fall back for IE 6-8, which is good enough IMO.

[lancewillett]

@karmatosed Can you update the patch for us? Would be great to get this in.

[karmatosed]

Form patch

[karmatosed]

@lancewillet : sorry was away yesterday, but have put a patch up.

@obenland : I'm not sure about the calc I did a slightly different take but happy if you want to take it from there and run with the patch.

[obenland]

Based off of karmatosed's patch

[lancewillett]

In 23628:

Twenty Thirteen: better styling for text input elements in small viewports. Props obenland and karmatosed, fixes #23629.