Product Preview Card

Community feedback

• 

  Jeff•210

  @W4GFOPosted almost 2 years ago

  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.

  Marked as helpful

  0