Mobile-first Responsive Pricing Component with Toggle

Community feedback

• 

  Rudolph•130

  @rudyjm3Posted about 2 years ago

  Hi rushinstuffin,

  Your solution looks pretty good. The question you had on the "blip after the toggle slider moves to the monthly side" I'm guessing you are referring to how the price cards size changes slightly when going from one price point to the other. I took a look at your code and I would adjust the font size for the prices from 4.4rem down to 4rem. That way when the annual price is in view it will not cause its container to widen beyond what it is to accommodate for the larger price width.

  For you 1st question about the background images, you may want to use percentages for placement instead. Instead of "background-position: top right, bottom left;" try "background-position: number%, number%, <== replaces top right;". I used this approach in the media query for the tablet view. I need to update the desktop media query with this method as well :)

  Hope this helps, Take care.

  Marked as helpful

  1