results summary component

Community feedback

• 

  P

  Fabian•150

  @slowjoPosted about 1 year ago

  Hey, I looked at your code and there is a cool trick you can use to get rid of your overflowing-content-issue!

  The purple div with class 'section' and id 'result' is breaking out of the container because it has 100% width AND 20px padding. By default, these 20px are added to the 100% width, so now the div has width 100% + 20px (left) + 20px (right).

  There is an easy fix to this: At the very top of your css file, add this:

  * {
      box-sizing: border-box;
  }
  

  With box-sizing set to border box, the padding is now taken into account regarding the element width. So the actual width is 100% now. There is a great interactive example that makes this easy to grasp in the MDN docs: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

  Marked as helpful

  1

  ---

  

  P

  Arianna Choza•260

  @unachozaPosted about 1 year ago

  @slowjo Thank you!! I knew I was forgetting something simple. And the example in the link really solidified this for me. thanks!

  0