Product Preview Card

Hello @BryBry04,

For media break points just one way to look at things:

First, in the "regular" CSS, put in the initial properties. ie:

• Color
• Font
• border radius
• etc

Now, before putting in any media break points, configure the additional CSS properties which will be specific to mobile. ie:

• Width
• Font-Size
• column/row (if using flex-box)
• grid specifics for mobile if using grid

Next, add in your desired media break points. Example: @media only screen and (min-width:1060) {...}

Now in the break point, just change the deltas for desktop. ie:

• Font-size
• widths
• column to rows or configure the grid layout
• etc...

One piece of advice would be to constantly be certain you're verifying that each change you make for one form factor doesn't negatively effect the other. ie: If you make a change to your styling and hoping it only effects one form-factor, immediately check the others to be sure the styling didn't mess anything up.