Responsive Interactive Pricing Component

Community feedback

• 

  Sarah•835

  @sarahc-devPosted almost 4 years ago

  Hey!

  This looks like a great effort! Really close to the original design. Good work on completing it.

  To reduce the number of media queries, you can design the CSS for mobile first, and then use max-width. So the container grows up to the max-width and then stops growing. I looked at your code, but I actually couldn't figure out why so many media queries were necessary. I think it could be related to how you are setting the width on the pricing component or it's related to setting a height. If I recall correctly, I learnt to avoid setting heights as it can cause problems. I tend to set a min-height: 100vh; on the body but I don't set height on anything else - unless it needs to be a fixed height in px - like the toggle.

  If you want, have a look at my code for this challenge - I only used 1 media query in my solution.

  You can remove the default focus states by using the psuedo selector :focus in CSS (so button:focus) and setting the outline to none. In the real world, for accessibility there should be some indicator that the item is selected when tabbing through the website however.

  To add the blur effect, you can use box-shadow and increase the 'blur' (the third number) when defining the box-shadow - eg. box-shadow: 0px 15px 30px rgba(0, 255, 231, 0.6); The 30px defines the 'blur'.

  Hope that helps :)

  2

  ---

  

  Roger Lemos•20

  @RogUniquePosted over 3 years ago

  @sazzledazzle Wow Thank u so much, this is really useful, I'll check ur code for try figure out my media queries. The tip about don't change height and start with mobile first is mind blowing, I'm so thankfully. Now I'll study this changes.

  0
• 

  Toyger•155

  @hacmaz123456Posted almost 4 years ago

  • For this page i think there is no need to use too much media queries, just build a page for 2 group: 1 is use Mobile/Tablet/... and another is for PC/Laptop/... And with this you just need to use only 1 media for 1 in 2 group you want
  • About cursor i don't understand, if you are trying to use hover on the circle in slider i think you need to research "input range slider thumb"

  1

  ---

  

  Roger Lemos•20

  @RogUniquePosted over 3 years ago

  @hacmaz123456 Hello Hacmaz, I'd to thank u for send feedbacks, and about cursor I wanted to customize like original where when your click on the 'slider thumb' or on 'switch button' a green blur replace the cursor pointer.

  0