Skip to main content
Best Answer

Need to make font on content title's banner much-much larger for accessibility reasons


Nicole
Helper II
Forum|alt.badge.img+1

Hi everyone, 
In order to be fully accessible we need a way to superimpose screen readable text over an image. For example, a banner. We can’t upload an image with text as it won’t be readable to someone who has accessibility needs. I’ve tried to add a content title which works, BUT I need control over making the font a minimum of 24-28 points (if not larger). Is there a workaround or is this custom CSS?
Thanks

Best answer by gstager

I believe you’ll need the CSS.

Something like this would change the size of text for the titles of many widgets.

Is this what you’re after?

/** Change size of the font for widgets **/

div.common-widget-title {
	font-size: 30px;
}
font-size: 30px;

 

View original
Did this post help you find an answer to your question?

15 replies

gstager
Hero III
Forum|alt.badge.img+7
  • Hero III
  • 886 replies
  • Answer
  • July 28, 2022

I believe you’ll need the CSS.

Something like this would change the size of text for the titles of many widgets.

Is this what you’re after?

/** Change size of the font for widgets **/

div.common-widget-title {
	font-size: 30px;
}
font-size: 30px;

 


gstager
Hero III
Forum|alt.badge.img+7
  • Hero III
  • 886 replies
  • July 28, 2022

Otherwise you can try this…

/** Resize the Content Title on Widgets **/

div.titles-container > div.title {
    font-size: 30px;
}

Hope these help.


Nicole
Helper II
Forum|alt.badge.img+1
  • Author
  • Helper II
  • 74 replies
  • July 28, 2022

Hi @gstager
Yes this is what I’m after. I’d like to get the content title I typed overtop of this .jpg banner to be the same size as the text in the image. (Then I would simply re-upload a blank banner so it’d become a string.) 

I tried copying and pasting your code but maybe I didn’t do it right?

 


gstager
Hero III
Forum|alt.badge.img+7
  • Hero III
  • 886 replies
  • July 28, 2022

Hmm…

Perhaps I am not addressing the right code.

The two examples I shared above correspond to these two items regarding the widget.

Where are you typing your text?

 


Nicole
Helper II
Forum|alt.badge.img+1
  • Author
  • Helper II
  • 74 replies
  • July 28, 2022

 


gstager
Hero III
Forum|alt.badge.img+7
  • Hero III
  • 886 replies
  • July 28, 2022

Did you try the second option I posted?

That is the one that corresponds with the Content Title.

/** Resize the Content Title on Widgets **/

div.titles-container > div.title {
    font-size: 30px;
}

 


Nicole
Helper II
Forum|alt.badge.img+1
  • Author
  • Helper II
  • 74 replies
  • July 28, 2022

Maybe I’m not copying and pasting correctly? 

 


gstager
Hero III
Forum|alt.badge.img+7
  • Hero III
  • 886 replies
  • July 28, 2022

@Nicole - I think that part is fine.

My content text adjusts ok…

What widget are you using?

Mine is a Custom Content Box.


gstager
Hero III
Forum|alt.badge.img+7
  • Hero III
  • 886 replies
  • July 28, 2022

Another thought is browser related…

What browser are you using and have you tried any others for testing?


Nicole
Helper II
Forum|alt.badge.img+1
  • Author
  • Helper II
  • 74 replies
  • July 28, 2022

Just checked, it too is a Custom Content Box.
I’m using Chrome. I just tried logging in using an incognito window same thing. I just tried MS Edge and same thing.  


Nicole
Helper II
Forum|alt.badge.img+1
  • Author
  • Helper II
  • 74 replies
  • July 28, 2022

I took away the image. it’s a custom content box:

 

 

 

 

 

 


gstager
Hero III
Forum|alt.badge.img+7
  • Hero III
  • 886 replies
  • July 28, 2022

Hmm…

That all seems good.

Couple more things to try.

  1. Do a refresh of the browser after you save out of the Branding and Look area
  2. Although I didn’t need to - try adding !important to the CSS like so…
/** Resize the Content Title on Widgets **/

div.titles-container > div.title {
    font-size: 30px !important;
}

 


Nicole
Helper II
Forum|alt.badge.img+1
  • Author
  • Helper II
  • 74 replies
  • July 28, 2022

Success! 
Fire the cupcake cannon! 
Thank you soooooo much! 


gstager
Hero III
Forum|alt.badge.img+7
  • Hero III
  • 886 replies
  • July 28, 2022
Nicole wrote:

Success! 
Fire the cupcake cannon! 
Thank you soooooo much! 

Glad to hear it!


sfrost
Helper II
Forum|alt.badge.img+3
  • Helper II
  • 87 replies
  • September 10, 2024

I’m bringing this back to the top! This helped, but I need a font size that appears to be bigger than the box that contains it… 

 

Any idea how to make it so my content doesn’t get cut off. 

 

The top box is a Custom Content Box

The Middle Box is a an image inside an HTML Widget Box because we’re testing an alternative (but I don’t think this route will help users who use screen reader)

 

The third box is also a custom content box. 

 

Any idea how to make it so we an see the full text? 

That’s the code I’m using… I think 80 PX is the right Size

/** Resize the Content Title on Widgets **/

div.titles-container > div.title {
    font-size: 80px !important;
}

/** End Resize the Content Title on Widgets **/

 


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings