Results summary component (responsive) + hover transitions

Community feedback

• 

  P

  aaronrubinstein•460

  @aaronrubinsteinPosted over 1 year ago

  Hey Kmigel,

  A trick to making a flex item "stick to the right" is to use margin-left: auto. That causes the item's left margin to expand to take up as much free space as possible, which pushes it all the way to the right.

  Taking a quick look at your code, here are a few suggestions:

  • Wrap your-points and max-points in a new div (making them a single flex item within the summary-item container) and style that div with margin-left: auto
  • You should be able to remove justify-content: center from summary-item (you want the flex items to be justified left, except for the last one that you push to the right)
  • Remove the absolute and relative positioning on all the items within the summary-item container. You shouldn't need that.

  That should address the responsive issues. Hope that helps 👍

  (here's my code for the summary item if you want to take a closer look at the css)

  Aaron

  Marked as helpful

  1