WordPress.org

Support

Support » Themes and Templates » [Resolved] Making h1 the same size as the page header

[Resolved] Making h1 the same size as the page header

  • I’ve suppressed the entry header on a specific page with this bit of css:

    .page-id-91 .entry-header
    {
    display: none;
    }

    Now I want the h1 content headers on that page to have the same style as the entry header has on other pages. What change(s) do I need to add to the css above to make that happen?

Viewing 11 replies - 1 through 11 (of 11 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

    Could you link a particular example of the headers that don’t have the right style and then an example of the headers that do? Link to them if you can.

    Sure, Andrew.

    Here’s a link to a page with a standard entry header displayed:
    http://www.deweylearn.com/our-philosophy/

    Here’s a link to the page where I suppressed the standard entry header and the headers see are the h1 style for pages:
    http://www.deweylearn.com/products/

    Thanks for your help.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    In your Child Theme style.css file add this:

    .entry-title,
    h1 {
     font-size: 48px;
     margin: 33px 0;
    }

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    To clarify, can you identify a page that doesn’t have the right style and then a page that does?

    Sure. I’m not making myself clear.

    I want h1 on this page and this page only:
    http://www.deweylearn.com/products/

    To match the entry header on all the other pages, for example, on this page:
    http://www.deweylearn.com/our-philosophy/

    So I want to ADD properties to this bit of css:

    .page-id-91 .entry-header
    {
    display: none;
    }

    that will make the headers on this page (.page-id-91) look like the headers on the other pages.

    Thanks.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    So I want to ADD properties to this bit of css

    How come? That element is hidden from the page so any styling you add to it won’t be shown.

    Haha! I know I’m being really confusing–I knew you would say that!!

    I know that element is suppressed. That’s the “entry-header” that gives the title of the page. That’s “Products,” and I don’t want that displayed.

    Then, you’ve got body copy, which includes several headers. Right now, those headers are 48px. I want them to be lighter, like the entry headers that are NOT suppressed.

    I think what I’m trying to do is make the h1 on pages be 21pt. But I may be wrong and I’m still trying to hunt down in the parent theme css the exact place where those headers are styled.

    Does that make more sense? I’m sorry for the confusion.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Try this instead:

    .page-id-91 .entry-content h1 {
     font-weight: normal;
     margin: 0 0 5px;
    }

    That did it. Thanks!

    Just as an FYI for anyone following this, the complete snippet of CSS now read:

    .page-id-91
    .entry-header
    {
    display: none;
    }
    .entry-content h1 {
    font-weight: normal;
    margin: 0 0 5px;
    padding: 10px 0;
    }

    If there is anything in the above that could be more elegant, please let me know. Haven’t done CSS in a while.

    MHB

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Resolved] Making h1 the same size as the page header’ is closed to new replies.