Pricing Component with Toggle Master

Hi @handleryouth! Your solution looks good, well done! Only on smallest mobile sizes the content of the cards overflows the cards themselves, and the toggle is really small, would be good if it got resized for smaller screens maybe. And the middle card still has a bigger padding on mobile, not sure if that's a part of the design or not.

Make sure that you don't leave the inputs without a <label> or an aria-label. It could also use some focus styles, the outline shouldn't really be removed without providing an alternative.

I would also change the <h1> elements where you have the different prices to a different element, not a heading. You should only have one <h1> per page, and the rest of headings should make sense in the hierarchy of the page.

Hope this helps, let me know if anything needs more explanation and I'll do my best to help :)

Hi there! Thank your for the feedback mate. You are right, the website is kind of not resized well in the mobile device. Before posting the solution, i asked my friends whether the website showed well in their devices. And in found it's okay. But, your feedback showed that it is not, so i need to think back about the reponsive design. I am still learning about how to use the media inquery properly, it always one of my biggest concerns in every website. About the padding in the middle price tag, i think i forgot to remove the padding. Anyway, thanks a lot mate!