Join Chris Converse for an in-depth discussion in this video Adjust the form area for small screens, part of Creating a Calculation Tool with AngularJS 1.
- And now the final CSS rules we'll create…will be for adjusting the layout for small…screens for the form area.…So back to our CSS.…Let's hit a few returns.…We're still inside of the media query…for screens under 500 pixels.…Let's paste in my calculator.…And a space, form, space, h4.…Put the h4 elements inside of the form area.…We're going to set font size to 1.1 em's…Then we'll set the margin to 0 on all four sides.…
Next rule, paste in my calculator…space, form, space, P, put in our brackets…We're going to set the font size here…to .8 em's.…Then a space, then we're going to bring…the line height down to 14 pixels.…And now we're going to target those break tags…we added in the form area.…So my calculator, space, form, space, br…Here we want these to take effect so…we can control where the break points are happening.…
So to do that, we're going to set the…display type of these elements to inline.…So my calculator, space, form, space, input…First we'll target the type of number…So put in our brackets for our attribute selector.…
Released
12/15/2015Using these lessons, and the free exercise files, you can build any kind of calculation tool for your clients, from shipping cost to mortgage payment calculators.
- Creating the HTML page structure
- Hooking in CSS and AngularJS
- Adding form elements
- Styling the layout with CSS
- Adjusting the layout for small (mobile) screens
- Defining the AngularJS application and controller
- Calculating usage and cost
Share this video
Embed this video
Video: Adjust the form area for small screens