search

cityofaustin / atd-knack-signs-markings

https://atd-knack-signs-markings.netlify.com/
Other
1 stars 0 forks source link

Increase Size of Field Labels and Inputs for Mobile Devices #210

Closed johnclary closed 5 years ago

johnclary commented 5 years ago

Increase the text size of field labels and height of field inputs for mobile users. A starting point, increase both by 50%?!

Here's your form element:

<div class="kn-input kn-input-number control" id="kn-input-field_2299" data-input-id="field_2299">
    <label for="field_2299" class="label kn-label">
        <span>Hours Worked</span>
        <span class="kn-required">*</span>
    </label>
    <div class="control">
      <input class="input" id="field_2299" name="field_2299" type="text" value="">
    </div>
    <p class="kn-instructions" style="display: none;"></p>
</div>

Screen shot: Field Labels

Screen Shot 2019-08-28 at 10.40.42 PM.png

Screen shot: Field Inputs

image

johnclary commented 5 years ago

@mateoclarke @mddilley can we get this one done during the current sprint?

mddilley commented 5 years ago

@dianamartin @johnclary All of the changes made in this issue, #208, and #209 are live in TEST (https://atd.knack.com/24-july-2019--test-signs-and-markings-operations#my-work-orders/) if y'all want to preview them. The CSS styles are wrapped in a media query that kicks in at 800px and below so make sure to use mobile view or decrease the browser width.