Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive interactive pricing component using React

#react#sass/scss#typescript
Alex 150

@Alex070822

Desktop design screenshot for the Interactive pricing component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I would appreciate any feedback on this challenge solution

Community feedback

Suleman 750

@legion40216

Posted

Hey, good job on this challenge. I would like to add some of suggestions, try to avoid manually centering the content vertically by using magic pixel values they almost never work on other screen sizes.

My advice here is to group all your content in a div and using the code below to center them.

position: absolute;
top: 50%;
right: 50%;
transform: translate(50%,-50%); 

and avoid giving heights to elements instead use padding and margin inside the div content to adjust the height.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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