Many of us regularly go online to buy items ranging from food to books to entertainment and everything in between. Common to this experience is the checkout cart. We make our selections by adding them to a virtual cart or basket in which we can review our chosen items before making our final purchase. In this chapter, we’ll look at how to style a checkout cart so that it works on both narrow and wide screens. We’ll also look at how to handle tables for narrow and wide screens. Tables are incredibly useful for displaying data, but they can be a bit difficult to style for mobile devices, so we’ll look at a CSS solution for narrow screens.
First, though, we’ll handle some theming. Regardless of the width of our screen, elements such as our input fields, links, and buttons will look the same, so we’ll style them first. Defining a theme early in the process of putting together a user interface can significantly reduce redundant code. It also increases our ability to keep our styles consistent, so that whether we’re creating a checkout cart or any other page or application, we can apply this process to any number of designs.