Media Queries?

How do I get the font to auto resize with the browser for different screen sizes?

As you can see www.mcchc.org (the images towards the bottom "Donate" "Volunteer" "Event-Sponsorship") if you minimize the browser and change the browser size to small the font spills off the image. Same when viewed on mobile device.

I tried adding:

@media screen and (min-width: 960px) {
figure.imageeffectck
font-size: 30%;

and


@media screen and (min-width: 960px) {
figure.imageeffectck figcaption {
padding: 0.1em;


to the imageeffectck.css file. I feel like this is something simple I'm missing, could you point me in the right direct please?

I still haven't been able to find a fix for this problem. Does anyone know how can I get the font to resize with the image to fit the browser window?

Hi
I have checked your website and the font is resized, but becomes very small
please detail what you want to do so that I can check
CEd

Yes, it seems I can get it to resize but it's not staying within the image or within the white box. When I make the font bigger (like in the example image on donate) it runs off the image. I just want it to resize with the image, so the font stays inside the white outlined box.

from what I see the problem is due to the fact that you simply have too much text
if you resize it to stay into it will become very small and unreadable ...

now there is no automatic resize, you must control that using mediaqueries for each resolution where you need it