Interactive pricing component using HTML, CSS and JavaScript

Hi Davide, well done on your first project! Quite an ambitious choice with the slider and it looks really good!

One note: you have most of your styles inside a media query for min screen width of 375px. This means that on screens narrower than that, all styling disappears. I would remove that query completely and just have those styles as a base for all screen sizes, and then add media queries to elements you want to modify on larger screens.

As for your 1st question, you've set padding-left and padding-bottom to the subtitle text (in the padding shorthand, it goes: top right bottom left). If you want it centered exactly as in the design, you could set padding on left and right and that would work on small screens. You could also set a max-width on that text and margin: auto to center it, but this would mean changing your media queries styling as well. I would also add text-align: center to the h1.

Hope this helps but again, really well done!

Hi Davide, It's a great result for first project! I'll try to answer some of your questions: 2. It has spaces because you card element has paddings, to fix that try setting margins and paddings to its children elements instead of setting padding for card element. 4. Circles size depends on header height, because you set background-size:contain. Try playing around with the height.

After the subscription your body has only header element, so it's height and width are the same as header's. body{height:100vh, width:100vw} will fix this.

Hope this helps. Happy coding!