Image card title font for mobile

Site URL: https://www.deadpixelfilms.com/about

Hi

I'm trying to tweak the title font size of an image card on our about page. When displayed in squarespace everything seems fine. When refreshed in Chrome and Safari on my phone the text is huge. I'm happy with how it looks on the desktop version.

I've tried a few custom CSS options from this forum but nothing has worked. 

I'm confused as to why they're displayed differently. Any thoughts?

23 hours ago, CalDPF said:

Site URL: https://www.deadpixelfilms.com/about

Hi

I'm trying to tweak the title font size of an image card on our about page. When displayed in squarespace everything seems fine. When refreshed in Chrome and Safari on my phone the text is huge. I'm happy with how it looks on the desktop version.

I've tried a few custom CSS options from this forum but nothing has worked. 

I'm confused as to why they're displayed differently. Any thoughts?

Add to Design > Custom CSS

/* About-mobile image title */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1623083395722_17041 .image-title p {
    font-size: 20px !important;
}
}

Thanks for the reply

Unfortunately it's not done anything.  Are you trying to block an image title or something?

21 hours ago, CalDPF said:

Thanks for the reply

Unfortunately it's not done anything.  Are you trying to block an image title or something?

if you look at the bottom right corner in Custom CSS, you will see a red notice. First it first unless all CSS won't work properly

If you can't find it, you can paste all CSS here, we can take a look

With above font size problem, edit Site Footer >> Add a Code Block >> Paste this new code

<style>
  /* About-mobile image title */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1623083395722_17041 .image-title p {
    font-size: 20px !important;
}
}
</style>