[Resolved] page hero to add “blog” page title

Home Forums Support page hero to add “blog” page title

  • This topic has 3 replies, 2 voices, and was last updated 4 months ago by Elvin.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1513913
    Meg

    Hello, Awesome GP Team!

    I’ve created a page hero to be able to show page title on the blog pages. I would like this title to display and behave in the same manner as a page content title. It seems to look fine on desktop screen, but not on mobile screens. On mobile screens, the h1 title on the blog pages shrinks, and there’s way too much space between the title and the content.

    Here are links demonstrating my conundrum:
    • blog home page – http://katieb28.sg-host.com/journal/
    • contact page – http://katieb28.sg-host.com/contact/

    Note that the entry titles “journal” and “contact” both look the same on a desktop screen, but not the same on a mobile screen. On the page hero (header element) for blog post entries that I created, I added “entry-header h1” to the element classes field in hopes that would address the issue, but it didn’t seem to make a difference. I’m stumped… is there something obvious that I’m accidentally overlooking?

    This site is still in development, thus the temp domain. I’m using a GeneratePress child theme (from GeneratePress version 3.0.2), with GP Premium version 1.12.2. I imported Catalyst theme from the site library, but then modified a fair amount.

    Thanks in advance for your help!

    Meg

    #1513955
    Elvin
    Staff
    Customer Support

    Hi,

    Note that the entry titles “journal” and “contact” both look the same on a desktop screen, but not the same on a mobile screen. On the page hero (header element) for blog post entries that I created, I added “entry-header h1” to the element classes field in hopes that would address the issue, but it didn’t seem to make a difference. I’m stumped… is there something obvious that I’m accidentally overlooking?

    You should be adding the class entry-title as an attribute on the <h1> tag you see on the markup text field.

    Example:

    <h1 class="entry-title">
    {{post.title}}
    </h1>

    On mobile screens, the h1 title on the blog pages shrinks, and there’s way too much space between the title and the content.

    This space you’re seeing is from Dashboard > Appearance > Layout > Container’s content area padding.

    You seem to have added 120px top and bottom padding values on its mobile view that makes things have too much space on that viewport.

    A wise man once said:
    "Have you cleared your cache?"

    #1514450
    Meg

    Aha! I added “entry-title” class to the h1 tag, kept “entry-header” in the element class field, and that totally solved the title font size dilemma for the journal pages. Thank you very much, Elvin!!

    As for the spacing on the mobile screen, that top-padding of 120px must be a remnant of the settings for Catalyst theme that I overlooked, but then I manipulated the padding on individual page settings to compensate. Thus the discrepancies across my page types on mobile screens. I will take a look at that more closely, and will try to make it more uniform across this site. To be honest, now that the page title for “journal” is the correct font-size on mobile screens, it makes the spacing much less glaring, so I’m not in a big hurry.

    Thanks again for taking the time to help me solve this problem, I really appreciate your willingness to share! Visiting the support forums for GeneratePress feels like being part of a big team that likes to work on jigsaw puzzles together. 🙂

    #1515244
    Elvin
    Staff
    Customer Support

    Thanks again for taking the time to help me solve this problem, I really appreciate your willingness to share! Visiting the support forums for GeneratePress feels like being part of a big team that likes to work on jigsaw puzzles together.

    We like solving things. 🙂

    No problem. Glad it’s working for you now. 😀

    A wise man once said:
    "Have you cleared your cache?"

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