[Support request] CSS styling for headers for single posts only

Home Forums Support CSS styling for headers for single posts only

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #964501
    Rob

    Hi GP,

    I use Beaver Builder alongside my GP theme, and I’m looking for a way to stylize my single post pages’ H2, H3, and H4 tags but NOT the header tags on pages outside of the blog.

    I’m just curious how I’d setup the CSS for each header tag on the single posts to play with each header’s font family, font weight, font size, font color, text transform, line spacing, and character spacing.

    Thank you for all of your help so far!

    #964511
    Leo
    Staff
    Customer Support

    Hi there,

    Simply add body.single in front of each selector like this:

    body.single h1 {
        font-family: "Lora", serif;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 24px;
    }

    Let me know if this helps 🙂

    #964643
    Rob

    Leo — you are the man! Thank you.

    Looks like it works on desktop, but not mobile. Anything I might be missing?

    #965146
    Leo
    Staff
    Customer Support

    It should work for both. Or are you looking for a mobile-specific font as well?

    Can you guide me to a section where I can see the issue?

    #965180
    Rob

    Hey Leo here’s one of my h2 headings on desktop:

    View post on imgur.com

    And here’s the same h2 heading on mobile:

    View post on imgur.com

    Here’s a link to that page.

    When I try to change the body font, it also seems like everything except the bulleted lists and numbers change.

    Best,
    Rob

    #965357
    Leo
    Staff
    Customer Support

    Can you edit the CSS to this?

    body.single h2 {
        font-family: "PT Sans Narrow", sans-serif;
        font-weight: 800;
        text-transform: none;
        font-size: 32px;
        color: #17a387;
        line-height: 1.5em;
    }

    Make sure to clear your browser cache.

    Let me know 🙂

    #966332
    Rob

    Hey Leo,

    Thanks a ton for your response.

    I cleared browser cache, added the text above, and checked on mobile vs. desktop. It seems like the font is still different for mobile vs. desktop.

    I don’t know if this is potentially the issue – but maybe my mobile device just doesn’t display the font I’ve selected. – and so it’s defaulting to something else. While I feel like the font is pretty common, maybe there are some devices that just don’t show it. I have a slightly older iPhone if that matters.

    In that case, could I create a mobile “fall-back” option? Or do you think there’s something else I still might be missing?

    #966440
    Tom
    Lead Developer
    Lead Developer

    Are you adding the PT Sans Narrow font to the website somehow?

    If not, it will only display if the device (PC, phone etc..) has the font installed.

    #967233
    Rob

    Hey Tom,

    The PT Sans Narrow seems to be a Google font. It’s one of the dropdown options within GeneratePress’ Customizer. I haven’t added it to the website manually.

    What’s confusing is that if I delete out the H2 CSS, and instead, I select PT Sans Narrow via Customizer > Typography > Headings > H2, the font shows up fine on both mobile and desktop.

    To me, this suggests that the font is installed on the site, and that something might be going on with the CSS to prevent the font from loading on mobile.

    #967258
    Leo
    Staff
    Customer Support

    It’s one of the dropdown options within GeneratePress’ Customizer.

    Without the font being selected in the customizer once, it’s actually not loaded – otherwise we would be loading every single Google font in your site which is not smart.

    Do you not want to use PT Sans Narrow anywhere in the customizer setting?

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.