Archived topic
Responsive Line Under Page Titles
10 replies · Started by Brandi on January 18, 2022
I am trying to get a line under the page titles that is responsive and lines up no matter the screen. Using the below code I was able to create the line but nothing seems to get it to the right spot.
Here is what it currently looks like.
/*Title*/
.page-hero {
position: relative;
}
.page-hero:after {
background-color: #29a9e1;
content: '';
display: block;
margin-left: 100px;
position: absolute;
width: 100px;
height: 4px;
bottom: 0px;
}Hi there,
Not sure if I fully understand.
The page linked isn't using GeneratePress.
Can you confirm?
Let me know :)
The site is using GeneratePress Pro and GenerateBlocks.
Can you clear and disable WP Rocket first?
The page you've linked is the Terms page and it's not using GeneratePress currently:
https://www.screencast.com/t/kvOshlFZ
Sorry about that. You should be seeing it correctly now - Cache Cleared Site
If you want to make a border below a (h2/h3 etc) heading, which has the full width of the surrounding container/div, try this CSS:
h2{width:100%;border-bottom: solid 1px #000;}
What if you try setting the headline block to inline:
https://docs.generateblocks.com/article/headline-overview/#spacing
Then add bottom border to it?
I realized I didn't do a very good job of explaining what I am trying to do.
How can I line up the logo, page title and thick blue line?
Hi Brandi,
The underline should be added as a pseudo element of an element inside the GB page-hero block.
You can modify the CSS you currently use to this one:
.page-hero > .gb-inside-container{
position: relative;
}
.page-hero > .gb-inside-container:after {
background-color: #29a9e1;
content: '';
display: block;
margin-left: 40px;
position: absolute;
left: 0;
width: 100px;
height: 4px;
bottom: 0px;
}Thank you Elvin! Exactly what I needed.
No problem. :D
