PORT Theme – Font size changes

  • Unknown's avatar
    dustindsmith · Member ·

    Hi. I’m new to CSS and looking to adjust font sizes on my site.

    When I select from the pre-determined font sizes (normal, small, tiny) it adjust a grouping of fonts and when I get some the right size, others are too big or small.

    I’ve looked up the code by using “inspect element” in Safari, and can make the adjustments temporarily there and do what I want. But, when I put it into the CSS bar on the left of my customize page, it doesn’t adjust anything.

    I’d appreciate any code that can help me make adjustments. Or, any help with why putting the code into the CSS bar doesn’t do anything. Thanks in advance!

    Dustin

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    hallluke · Member ·

    Can you post the code that you’ve tried so we know what doesn’t work – it will make it easier to see which sections you’re trying to change.

  • Unknown's avatar
    dustindsmith · Member ·

    I’m trying to change the words “Ideation, Visualization, Execution” to a bigger size. It looks like they are at .4em, but when I copy this section, place it into the CSS bar and change it to .9em in the customizer it doesn’t change anything.

    /* font-size: 0.4em; */
    /* font-weight: 400; */
    /* font-family: “Montserrat”, sans-serif; */
    /* font-style: normal */

    I also tried this:

    .title {

    font-size: 0.9em;
    }

    Even if this is wrong, I would think something would happen when I put it in the CSS customizer bar, but nothing happens.

    Thanks for the help.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, given you are using a custom font, we have to use a little bit more specific CSS rule and then target the featured pages section. Add this to your custom CSS and you can adjust the size as desired. 

    .wf-active #featured-pages .title {
    font-size: 0.9em;
}
  • Unknown's avatar
    dustindsmith · Member ·

    Thank you thesacredpath !

    Is there an easy way to figure out what CSS I need to change other type sizes? I get that #featured-pages represents the title on the feature pages section of the site. But, how do I know what to put in for the other type?

    Do I always use .wf-active in front of it?

    So, example, if I want to change the type size on the block of text “I love ideas no matter what form they take…” would I use:

    .wf-active #name-ofsection .title {
    font-size: 2.0em;
    }

    If so, I just need to figure out the name of section and if .title is the right name as well.

    I want to change font sizes on a lot of the type, and don’t want to keep asking for help. So, hoping there’s an easy way to figure the formula.

    Thanks.

    Dustin

  • Unknown's avatar
    thesacredpath · Member ·

    What I do in the web inspector, is inspect the element and then look in the list of relative CSS for the thing I wish to change. Sometimes that selector can be used as it is, but in other instances, the font family/size/etc., may be inherited from a much broader CSS rule, so you end up looking at the HTML and constructing the selector so that it target just what you are wanting to change. In the case of the text you mention, on this theme, I would use the following to change the size. 

    .wf-active .home-section .inside h3 {
    font-size: 0.76em;
}
  • Unknown's avatar
    dustindsmith · Member ·

    Thanks. I’ll give this a shot and try to make the other changes. I may have to ask a few more questions at some point. Thanks again for your help.

  • The topic ‘PORT Theme – Font size changes’ is closed to new replies.