Help reducing font size of poster image block in mobile version with CSS

Site URL: https://your-social-bee.squarespace.com

Hi 

I want to reduce the size of the subtitle font on overlay text on a poster image (pink box with yellow partial edge) at the bottom of my home page. Currently the testimonial text does not fit on the background image. I have tried various forms of CSS but am failing to identify the magic combination of code to target this.

Any help would be great!!

Password for website is: yoursocialbee

Thanks

Cathrin

Hey,

I'm still learning the ropes of code but try this:

@media only screen and (max-width: 640px)
body {

#block-yui_3_17_2_1_1583417351057_4014 {

font-size: 14px !important;

}}

Let me know how it goes

41 minutes ago, Thurstings said:

 

Thanks so much for the suggestion, sadly it hasn't changed the font size.

I tried quite a few different bits of code but nothing seems to change it! So frustrating! I'll have to think of another way round it.

Thanks again

@cjp2380 

@media only screen and (max-width: 640px)
body {

.image-card-wrapper {

font-size: 14px !important;

}}

Let me know if this works? I am still trying to figure out how to target different things using the google inspect.

@Thurstings

Afraid that's not worked either. I'm the same with google inspect!

Thanks for the suggestion.

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.image-subtitle * {
    font-size: 18px;
}
}

None of these work in 7.0 with Pacific. It would be great to find a fix for this!

4 hours ago, caseyscalf said:

None of these work in 7.0 with Pacific. It would be great to find a fix for this!

Can you share link to page where you use poster block?