Trying to change a font size in a page builder element in my theme

I'm trying to increase the font size of a theme element in my site. The theme author has been somewhat helpful, but I still need some more assistance to understand what he's talking about. I've asked him the same question several times but he's not always been 100% helpful in his responses.

I've attached six screen shots (one I attached in error, which you can ignore).

The first is the advice from the theme author, Benito, who says to use the Chrome/Firefox Inspector.

You can see in my screen shots that my font is very small, but I found the Inspector, opened it and identified the class I wanted for the FAQ post.

I also show that I added this CSS to the CSS editor, but as of yet I don't see any difference.

Any thoughts? Thanks as always!!

  • Predrag Dubajic

    Hey Eric,

    Hope you're doing well today :slight_smile:

    I believe I see what the issue is here.
    CSS works in a way that you can set priority to your attributes by using classes and ID's of element holders, for example, let's say you have class .text-holder that holds your text and you have .site-holder which is the class of your entire site wrapper.

    If you now add CSS like this:

    .site-hodler .text-holder {
    	font-size: 10px;
    }
    
    .text-holder {
    	font-size: 20px;
    }

    Size of text will now be 10 pixels since the .site-hodler .text-holder selector is more precise than .text-holder.

    So now when I look at your code I can see that you added this CSS code:

    .lol-faq-topic-content {
    	font-size: 50px;
    }

    Now, in inspector I see that CSS from the theme is this:

    #content .lol-faq-topic-content {
    	font-size: 12px;
    }

    Basically your theme #content .lol-faq-topic-content selector has higher priority than .lol-faq-topic-content that you use.

    So what you need to do is simply add #content in your selector to make it higher priority and your code should look like this:

    #content .lol-faq-topic-content {
    	font-size: 50px;
    }

    Hope this all makes sense :slight_smile:

    Let us know if it's working after that or if you need additional assistance.

    Best regards,
    Predrag

  • EricGiauque

    Hi Predrag,

    Thanks for this great insight. I was able to get the font size to change with this fix.
    I originally set the size to 50px to ensure I could see the change, but the result was that it made a big mess.

    I assume that the issue in that case of 50px is that the line height is only 20px, which causes the font to overrun between lines.

    When I correct the font size to 20px it looks much better, but can you give me some help on how to adjust that line height?

  • EricGiauque

    Okay, I've just played around with this some more by entering the following CSS which I got to work successfully :slight_smile:

    #content .lol-faq-topic-content {
    font-size: 20px;
    }

    #content .lol-faq-topic-content {
    line-height: 30px;
    }

    #content .lol-faq-topic-content {
    font-weight: 400;
    }

    #content .lol-faq-topic-title {
    font-size: 30px;
    }

    #content .lol-faq-topic-title {
    line-height: 35px;
    }

    #content .lol-faq-topic-title {
    font-weight: 400;
    }

    #content .faq-description {
    font-size: 25px;
    }

    #content .faq-description {
    line-height: 30px;
    }

    #content .faq-description {
    font-weight: 400;
    }

    I tried this as well, but it did not seem to work. (Because the topics are not content?)

    #content .lol-faq-topics {
    font-size: 50px;
    }

    #content .lol-faq-topics {
    line-height: 50px;
    }

    #content .lol-faq-topics {
    font-weight: 400;
    }

    I also want to increase the font size of H3 (header 3?) which says "Question and Answer" and the link at the bottom of each section that says "Back to Top" I can't seem to figure out what class those are.

    Thanks as Always!!!

  • EricGiauque

    Hi
    here's the URL
    https://doodlenoodle.com/the-process-detailed-flow/
    please see the bottom of the page.

    All of the following are too small:

    "Frequently-Asked-Questions"

    (Bullet) What are the Four Dates Teachers choose when they sign up?

    In order to bring this all together, the teacher will choose four dates which serve as milestones to the process and facilitate communication at all levels. We'll now walk through each of these dates individually.

    Back to Top

  • Predrag Dubajic

    Hey Eric,

    Thanks for the info, here are the selectors you can use:

    - Frequently-Asked-Questions - #content .divider h3

    - (Bullet) What are the Four Dates... - #content #lol-faq-topics li a

    - Back to Top - #content .back-faqs

    - In order to bring this all together... I left this for last since it's just a bit trickier, what you want to do is use this class #content .lol-faq-entry, however it will affect the font size of the list above it as well, so if you wish to adjust list text size then also use this selector #content .lol-faq-entry ol li

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.