Font sizing for different screens

I figured out how to get div boxes containing images to size down on different screens and still stay centered, but the text over the image and div block won’t shrink on different screens. What should I do to fix that? I’ve tried making the text a percentage instead of in pixels and that didn’t work.


Here is my public share link: LINK
(how to access public share link)

Hi. Very general Q. Add link/screenshots or more details.

(Sets the font-size to a percent of the parent element’s font size)

https://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=50%25

https://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/