Make WordPress Core

#23629 closed enhancement (fixed)

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

Reported by: karmatosed Owned by: lancewillett
Milestone: 3.6 Priority: normal
Severity: normal Version: 3.6
Component: Bundled Theme Keywords: needs-testing needs-refresh has-patch
Focuses: Cc:


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.

Attachments (4)

photo.PNG (55.5 KB) - added by karmatosed 14 months ago.
percentage.diff (1.3 KB) - added by karmatosed 14 months ago.
Percentages rather than a fixed form width size
formelements.diff (692 bytes) - added by karmatosed 14 months ago.
Form patch
23629.diff (650 bytes) - added by obenland 14 months ago.
Based off of karmatosed's patch

Download all attachments as: .zip

Change History (16)

karmatosed14 months ago

comment:1 obenland14 months ago

  • Summary changed from Form elements aren't equal when on mobile to Twenty Thirteen: Form elements aren't equal when on mobile

comment:2 lancewillett14 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 3.6

comment:3 sabreuse14 months ago

  • Cc sabreuse added

comment:4 lancewillett14 months ago

@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?

karmatosed14 months ago

Percentages rather than a fixed form width size

comment:5 karmatosed14 months ago

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.

comment:6 lancewillett14 months ago

  • Keywords needs-testing added

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

comment:7 obenland14 months ago

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?

comment:8 karmatosed14 months ago

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.

comment:9 obenland14 months ago

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.

comment:10 lancewillett14 months ago

  • Keywords needs-refresh has-patch added; needs-patch removed

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

karmatosed14 months ago

Form patch

comment:11 karmatosed14 months ago

@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.

obenland14 months ago

Based off of karmatosed's patch

comment:12 lancewillett14 months ago

  • Owner set to lancewillett
  • Resolution set to fixed
  • Status changed from new to closed

In 23628:

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

Note: See TracTickets for help on using tickets.