Change the font size in the Yoast Schema FAQ?

Alf85

Elite Member
Joined
Sep 7, 2021
Messages
2,592
Reaction score
918
Hi. I am using Yoast FAQ schema and it does not let me increase the font size. In all my posts I use the letter in M but in Yoast it is only possible by CSS. How can I do it? I read the guide but I don't understand.
yoast.com/developer-blog/theming-gutenberg-the-faq-block/
 
Hi. I am using Yoast FAQ schema and it does not let me increase the font size. In all my posts I use the letter in M but in Yoast it is only possible by CSS. How can I do it? I read the guide but I don't understand.
yoast.com/developer-blog/theming-gutenberg-the-faq-block/
changing font-size rule in css for propper class not working?
 
I don't know how to do it. Can you tell me?
I`m working with react and vue, but basically you should have some css file for your template and search there for the class that is used for your posts
so it might be like .[selector-name] {
}


open your browser`s development tool to see what element are you going to target and what class it has
 
From your browser first do a right click on a element or text which you want to change, then click inspect. You will see a list of different html elements, and one you selected will be highlighted. Then you need to read it's class if it has it, it will be like class='something'. Now, I guess you are on Wordpress and open Appearance//Theme editor...there will be a list of files on the right, you want to find one called style.css or something similar. Then open it, and at the end of the file add .something { color: #000; } where something should be replaced with class name you found on your element, and #000 with color you want. Save file and that's should be it. Please note that this are just general steps, some of the steps may be different, it depends a lot on your theme and other factors.
 
From your browser first do a right click on a element or text which you want to change, then click inspect. You will see a list of different html elements, and one you selected will be highlighted. Then you need to read it's class if it has it, it will be like class='something'. Now, I guess you are on Wordpress and open Appearance//Theme editor...there will be a list of files on the right, you want to find one called style.css or something similar. Then open it, and at the end of the file add .something { color: #000; } where something should be replaced with class name you found on your element, and #000 with color you want. Save file and that's should be it. Please note that this are just general steps, some of the steps may be different, it depends a lot on your theme and other factors.
In my post texts, the source says this:

.has-medium-font-size {
font-size: var(--wp--preset--font-size--medium) !important;

But in the Yoast FAQ it says the following:

font-size: 17px;
 
It's because they are using variables...you can find --wp--preset--font-size--medium and replace it's size, it should be in one of .css files in your theme, at the same location I described before. If you cannot locate it you can add it to the end of style.css file like this, just replace font size with one you want:

.has-medium-font-size {
font-size: 17px !important;
}
 
It's because they are using variables...you can find --wp--preset--font-size--medium and replace it's size, it should be in one of .css files in your theme, at the same location I described before. If you cannot locate it you can add it to the end of style.css file like this, just replace font size with one you want:

.has-medium-font-size {
font-size: 17px !important;
}
Thanks. I will try.
 
Back
Top