Issue 04 - Fixing the PostGridLayout Breakpoints

Error we need to solve:

Mobile devices to the new PostGridLayout are not wrapping the Grid

When viewing the new PostGridLayout for the Case Studies Page, the grid does not wrap

Grid Layout First Pass

Assumptions:

Per Tailwind CSS documentation (https://tailwindcss.com/docs/grid-template-columns#breakpoints-and-media-queries), and (https://tailwindcss.com/docs/hover-focus-and-other-states#media-and-feature-queries) a solution to the issue may involve adding breakpoints to accommodate for device screen sizes.

What we did for the Solution

Added breakpoints for sm, md, lg, xl devices to the new PostGridLayout

// Changed this line:
<div className="grid grid-cols-3 gap-3 ">


// to this:
<div className="grid gap-3 sm:grid-cols-1 ms:grid-col-2 lg:grid-cols-3 xl:grid-cols-4">

Grid Layout First Pass

Internal Pages

Project 08 - Making the Grid Preview Component

Project 07 - Thinking About Case Studies