Make WordPress Core

Opened 12 years ago

Closed 12 years ago

#23629 closed enhancement (fixed)

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

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

Description

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 12 years ago.
percentage.diff (1.3 KB) - added by karmatosed 12 years ago.
Percentages rather than a fixed form width size
formelements.diff (692 bytes) - added by karmatosed 12 years ago.
Form patch
23629.diff (650 bytes) - added by obenland 12 years ago.
Based off of karmatosed's patch

Download all attachments as: .zip

Change History (16)

@karmatosed
12 years ago

#1 @obenland
12 years ago

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

#2 @lancewillett
12 years ago

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

#3 @sabreuse
12 years ago

  • Cc sabreuse added

#4 @lancewillett
12 years 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?

@karmatosed
12 years ago

Percentages rather than a fixed form width size

#5 @karmatosed
12 years 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.

#6 @lancewillett
12 years ago

  • Keywords needs-testing added

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

#7 @obenland
12 years 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?

#8 @karmatosed
12 years 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.

#9 @obenland
12 years 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.

#10 @lancewillett
12 years 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.

@karmatosed
12 years ago

Form patch

#11 @karmatosed
12 years 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.

@obenland
12 years ago

Based off of karmatosed's patch

#12 @lancewillett
12 years 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.