Skip to content
OverviewSolutions
8
Comments
4
Rudolph
@rudyjm3

All comments

  • rushinstuffin•380
    @kyle-barry-appsSubmitted about 2 years ago

    I thought this one was fun and useful. You see these pricing structure components everywhere.

    My only real question is about the background image. Is there a better way to make this background image on small viewports grow appropriately and stay fixed in relation to the rest of the content?

    Also, there seems to be a tiny little blip after the toggle slider moves to the monthly side. Any thoughts on why that is? Something to do with the transition I imagine.

    Mobile-first Responsive Pricing Component with Toggle

    1
    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
  • Volodymyr Balashov•510
    @volod-oneSubmitted almost 3 years ago

    Hello community of front end mentor. Today this is my second solution. I already did finish this challenge before, but this time I decided to complete it with my recent knowledges. And again as I can judge this component may be included in section without any problems. #modulesforever! Please feel free to keep your comment and your doubts about my solution. And see you next time.

    Order summary component

    2
    Rudolph•130
    @rudyjm3Posted almost 3 years ago

    The design looks great. The only thing that would need adjusting is the "cancel order" link. It has a width of 100% so if the users cursor is anywhere along the x-axis of the link even if not directly over it, it will be clickable. Quick fix though :) Keep up the great work.

    0
  • Rudolph•130
    @rudyjm3Posted almost 3 years ago

    Wow looks great! Pixel perfect it seems. Smooth flow and animation. A extra feature that would be neat to add is tracking house wins, and draws. How long did it take you to do this challenge? Great work @willykleitinho :)

    1
  • Rudolph•130
    @rudyjm3Posted almost 3 years ago

    I like the box-shadow you used on the review cards. Even though this site design is a flat design the drop shadow look good, I probably would drop the alph value from 20% to 10% :)

    1