Interactive pricing component using HTML, CSS and JavaScript

Community feedback

• 

  Agata Liberska•3,995

  @AgataLiberskaPosted almost 4 years ago

  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!

  1

  ---

  

  Davide•1,725

  @Da-vi-dePosted almost 4 years ago

  Hi Agata Liberska, thank you very much! :-) I made the changes you suggested and it looks better, I deleted the first media query as well. Thank you again for taking the time and look at my code, i really did appreciate your help. Happy coding, have a nice day.

  0
• 

  Elizabeth•460

  @gelizabethPosted almost 4 years ago

  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!

  1

  ---

  

  Davide•1,725

  @Da-vi-dePosted almost 4 years ago

  Hi Gelizabeth, thank you very much, yes it did help, in 2 minutes i fixed 2 major problems. About the line i got it but i'd better leave it like this, i should touch many things... I've learned the lesson, the next time i will be more careful when it comes to deal with white spaces. I appreciated your help, happy coding to you too.

  0