8 Designing a checkout cart

This chapter covers

  • Using responsive tables
  • Autopositioning using Grid
  • Formatting numbers
  • Conditionally setting CSS based on viewport size via media queries
  • Using the nth-of-type() pseudo-class

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, ...

Get Tiny CSS Projects now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.