Add line around H2 headings

This topic has 3 replies, 2 voices, and was last updated 4 years, 10 months ago by David.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts

May 14, 2021 at 11:24 pm #1781119

Steph

I’m currently in the process of switching themes and I cannot figure out how to add / adjust a CSS code I inserted for individual pages with my old theme…

1. I’m trying to add a line on each side of H2 headings for all pages as I did here: https://www.anomadspassport.com/oceania-travel-guide/
I do not want it for posts or the home page, so I tried to create an element

The old code:

h2 {
  overflow: hidden;
  text-align: center;
}

h2:before,
h2:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

h2:before {
  right: 0.5em;
  margin-left: -50%;
}

h2:after {
  left: 0.5em;
  margin-right: -50%;
}

2. Is there a way to place the page title on the featured image for some pages?

Thanks!

May 15, 2021 at 5:11 am #1781412

David

Staff

Customer Support

Hi there,

1. That CSS should work fine to limit to the pages you would use the .page selector in your CSS… so it would be something like this:

.page h2 {
    overflow: hidden;
    text-align: center;
}

.page h2:before,
.page h2:after {
    background-color: #000;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}

.page h2:before {
    right: 0.5em;
    margin-left: -50%;
}

.page h2:after {
    left: 0.5em;
    margin-right: -50%;
}

2. You can use a Block Element to create a dynamic Page Hero where you can set the Featured image as background and the title overlaying it:

https://docs.generatepress.com/article/block-element-page-hero/

May 15, 2021 at 10:03 pm #1782254

Steph

Thank you.

I had to adjust the CSS code a bit as the lines were not centered and too long.

Here’s the code that works in case anyone searches for it in the future:

/* line around h2 headings desktop */
@media (min-width: 768px) {
    .page h2 {
         overflow: hidden;
         text-align: center;
     }

    .page h2:before,
    .page h2:after {
        background-color: #000;
        content: "";
        display: inline-block;
        height: 1px;
	      position: relative;
        vertical-align: middle;
        width: 25%;
    }

    .page h2:before {
        right: 0.5em;
        margin-left: 0%;
    }

    .page h2:after {
        left: 0.5em; 
        margin-left: 0%;
    }
}

/* line around h2 headings mobile */
@media (max-width: 768px) {
    .page h2 {
         overflow: hidden;
         text-align: center;
     }

    .page h2:before,
    .page h2:after {
        background-color: #000;
        content: "";
        display: inline-block;
        height: 1px;
	      position: relative;
        vertical-align: middle;
        width: 10%;
    }

    .page h2:before {
        right: 0.5em;
        margin-left: 0%;
    }

    .page h2:after {
        left: 0.5em; 
        margin-left: 0%;
    }
}

Going to create the block element tomorrow.

May 16, 2021 at 5:12 am #1782606

David

Staff

Customer Support

Glad to hear you found a solution – and thanks for sharing!

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

[Resolved] Add line around H2 headings

Popular Articles

[Resolved] Add line around H2 headings

Popular Articles

Start building better websites today.