Affinity Theme – change individual post headline size

  • Unknown's avatar
    hedgeriders · Member ·

    Hello, our blog is http://hagsandshrews.com and to look at a sample post you can go here: https://hagsandshrews.com/2018/01/19/read-it-all-here/

    Globally we’re using Affnity theme with normal-sized headlines. Sometimes the normal size is too large and we end up with a two-line headline. I’d like to be able to use CSS on individual posts to shrink some headline sizes.

    Is this possible? If so, how?

    Thanks very much in advance,
    Anne

    @hedgeriders

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

  • Unknown's avatar
    sewingpattern · Member ·

    Hi Anne,

    When you say you wish to shrink headline sizes, do you mean the headline that’s at the top of the page, overlaid on the photo? Or do you mean the headline that is below that, that sits above the article’s body text?

    One thing to consider either way is that many users will view your site on many wildly different screen sizes, devices, accessibility options, and it won’t be possible to control how it looks across the board. Therefore, from a web-design standpoint, it may end up being best to accept that text may carry over to the next line.

    However, the ultimate design is up to you, so if you’d like to try to adjust the text size of a specific headline, let me know which specific headline you are thinking of, and I’ll do my best to help!

  • Unknown's avatar
    hedgeriders · Member ·

    I agree that it’s best to leave the headline at the top of the page (overlaid on the photo) alone. It will expand and shrink based on each reader’s device. I’d *like* to be able to only size the headline below that, sitting above the article’s body text, from time to time. Is that possible using html on the individual page, or CSS?

    if not, that’s fine. The theme is awesome and looks like it will serve us well. We just get a little verbose with our titles from time to time. ;o)

  • Unknown's avatar
    sewingpattern · Member ·

    Awesome! Ok, so to change the font size of the headline above the body text, here is some CSS code you can try pasting into your CSS customizer:

    @media screen and (min-width: 46em) #post-4 .entry-title {
	font-size: 1.5em; }

    Where it says “post-4,” you will need to replace that number with the number of the specific post you’d like to adjust. To find this, go to the edit page of the blog post in question, and look at the URL in your internet browser. It should say something like test.wordpress.com/3 And that number at the end of the URL is the post number you’ll want to paste into the code above so that it says #post-3

    One thing to note is that when a user’s screen size is smaller than a certain width, the font-size will revert to the theme’s default sizing for small screen sizes. If you would like to adjust that too, let me know, and I can send over some additional CSS.

    Please let me know if anything doesn’t make sense, or if the code above doesn’t work!

  • The topic ‘Affinity Theme – change individual post headline size’ is closed to new replies.