Join Chris Converse for an in-depth discussion in this video Adjust the main area for small screens, part of Creating a Calculation Tool with AngularJS 1.
- So now we're going to focus on adapting our design…for the smallest screens.…So if I come over here to the browser…and collapse this down to around 320 pixels,…we can start to see that the top section…starts to get really crowded with the typography here.…We can see that our per year pseudo-element is wrapping,…and the same thing down here in the form area.…So first, we're going to focus on this main area up here…by changing the size of the light bulb graphics…and changing the size of the type.…So let's go back to our CSS file.…Let's scroll down and we're first going to add a media query…and we're going to pick a size of 500 pixels.…
So we'll start with an at symbol…then type media.…We'll set screen and.…Then in parentheses, we'll put max-width,…colon, 500 pixels.…Then outside of the parentheses, we'll put in our brackets.…I'm going to come in here…and space the brackets out a little bit.…So now, any rules we put inside of the brackets…for this media query, will only take effect…if the browser is less than 500 pixels wide.…
Using 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