0

I have a html page something like this

<div id="parentDiv">
 <p>A</p>
 <p>B</p>
</div>

I would like to change the font size of the two < p > elements as the width of parent div (id=parentDiv) changes.

I have used vw to set font sizes but it does not achieve what I want.

I am an absolute beginner in CSS.

coderguy
  • 67
  • 12
  • Let say `div.parentDiv` has width of `1000px`, so you need both `p` `font-size` should be `1000px`. Why would you need that? – DecPK Apr 12 '21 at 23:32
  • If say initial width of div is 1000px and font sizes of p is 20px. If div changes to 500px then change p font size to 4 px. – coderguy Apr 12 '21 at 23:37
  • Why is div.parentDiv having different sizes? If it's in response to a different display size, then the viewport width units (vw) should do what you need, but if something else is changing the size of div.parentDiv unrelated to the screen size, you may need to use JavaScript to adjust the font-size. – Rich DeBourke Apr 13 '21 at 00:08
  • see those links: https://stackoverflow.com/questions/30693928/how-to-make-font-size-relative-to-parent-div/51737647 or https://stackoverflow.com/questions/10292001/how-to-set-font-size-based-on-container-size or https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container – Waseem Almoliky Apr 13 '21 at 00:22
  • Bootstrap 5 has RFS - Responsive Font Sizes. "Bootstrap’s side project RFS is a unit resizing engine which was initially developed to resize font sizes" Not sure if that may help - https://getbootstrap.com/docs/5.0/getting-started/rfs/ – avn May 18 '21 at 14:09

0 Answers0