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

Nearly no use of classes and IDs in HTML

Sven 295

@Sven72

Desktop design screenshot for the Pricing component with toggle coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


It would be great if I could get feedback relating to the codestructure. How can I improve it so that it become professional and maintable? Also there is an issue with the Dollar Sign and the price. Because the "$" is not vertically centered. I have no clue how to accomplish this? Best and stay healthy

Community feedback

Bonrey 1,130

@Bonrey

Posted

Hi, Sven! The website looks pretty cool! However, on my laptop (with the screen width of 1280px) I see the mobile design, which isn't good :( So, I suggest you make the mobile breakpoint closer to 600px or something like that. And simply reduce the components' size and fonts for the screens like mine. As regards the dollar sign, I'm not sure but I think you can try adding to your dollar span "line-height" property equal to the parent's height (in your case, it's "p"). And it should help to vertically align the dollar sign.

See this great article for further details: https://css-tricks.com/centering-css-complete-guide/

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