price component using html, css, js

Community feedback

• 

  willykleitinho•350

  @willykleitinhoPosted about 3 years ago

  The problem isn't on box-sizing. If you're talking about the buttons growing, that happens because you're adding a border to the button, instead of just changing it's color. Try adding a border of the desired width to the element without pseudo-selectors, and set it's background color to the button's background color.

  0

  ---

  

  sophiestrausberg•60

  @sophiestrausbergPosted about 3 years ago

  @willykleitinho Thanks! I was able to get the buttons to stop growing on hover following your advice. From my understanding, though, I should have been able to use "box-sizing: border-box" to include the border in the calculations of the width and height. So the content box should have shrunk to absorb the extra size, and the total height + width should have remained the same. I'm not sure why I can't get it to work. Am I misunderstanding its usage? appreciate the help <3

  0

  

  willykleitinho•350

  @willykleitinhoPosted about 3 years ago

  @sophiestrausberg That's exactly what should happen IF you give your element width and height, explicitly (maybe I'm wrong on that). Your buttons were increasing because they don't have a defined height, it's based only on the padding and the font-size, so it was free to grow, but the width didn't change because it's set to 100% (because of Flexbox, I guess).

  Marked as helpful

  1