Responsive Single Price Component

Great work on this challenge, Sonia! Rafael has already given some great advice.

With regards to CSS units, I typically use rem for properties like font-size, padding and margin. This allows you to simply re-declare the font-size on the html element and the sizes will change proportionally.

I very rarely use vw, as it only looks at the viewport. This means you can get some unexpected sizing issues where child elements overflow their parent on the x-axis. Instead, I'll typically use %. Or if I'm using Flexbox, flex-grow and with Grid I'll commonly use fr units.

I hope that helps. Let me know if you have any questions!

Hey, congrats on your solution!

As some feedback I can give:

• Prefer IDs/classes to style your elements instead of inline styling. Inline styling can be very hard to read when you need to use a lot of styling.

• You could check some different resolutions when resizing the browser to check some layout broking gaps.

Thanks so much for the feedback. We just learned about implementing bootstrap and refactoring work. Looking forward to implementing this advice with it.