Skip to content
Submitted over 1 year ago

Pricing component with toggle

Nate-epp•200
@Nate-epp
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Pricing component with toggle
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

As you can see I can't complete imitate the original challenge due to my limited knowledge in CSS field. I tried to set padding and change height of middle container to be bigger than both left and right containers, it didn't work though. Instead of expanding vertically like the original design, it keep compressing the inner content instead. Learning more about grid should help fix this problem but I just can't wrap around it for the time being. Any feedback would be highly appreciated.

Community feedback

  • cmb347827•780
    @cmb347827Posted over 1 year ago

    Hi, I'm not that great either at CSS, it's harder than it seems when you first get started! So don't worry, it's normal.

    Try adding a media query for the desktop width , and within that adding the following code: .middle{ margin-top: -15px; margin-bottom: -15px; border-radius: 15px; } You may need to adjust the negative margin value to make it work, but this worked for me.

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord