Hero Title and Caption out of place

[Ryan Hennesy]

Hi Bill,

So, I used the code from this post to make the hero section on my homepage linked. I don’t really use buttons on the rest of the site, and in places where there isn’t a buttons, like the events page, the hero title and caption are pushed down the screen. The distance depends on the screen size, and on my widescreen monitor, it pushes them down on top of an important link on that page.

The weird thing is that if I scroll down the page, then scroll back up, the position is corrected.

Hoping you can help.

I’ve included two screenshots from different monitors.

Thanks,
Ryan

[Bill Robbins]

Hi Ryan,

It sounds like you’ll need to insert dummy links into the pages where you’re running into that trouble. You can use

#

as a link that doesn’t go anywhere when clicked. See if inserting that won’t allow the layout to function as expected.

Take care,
Bill

[Ryan Hennesy]

Hi Bill,

That didn’t seem to have any affect.

I tried it on the Events page first (because that’s where it potentially blocks an important link). I then realized it might not be treated the same, since the Events page is being run by a plugin. So, I tried it on a couple different pages too.

I’m attaching a screenshot. The white border indicates that I have a clickable link, but as you can see, the Title is still displaced.

Thanks for your help.

Ryan

[Bill Robbins]

Hi Ryan,

You might try adding this at the bottom of your Custom CSS and see if it makes a difference here for you:

@media only screen and (min-width: 768px) {

	.post-type-archive-tribe_events .hero-copy {
		clear: both;
		position: static;
		padding-top: 0;
	}

}

Take care,
Bill

[Ryan Hennesy]

That worked! Well, it worked for the Events page, which is, as I can gather, the only one it was intended to work for. The other pages (i.e. /Ministries, /blog, /worship) are still wonky.

Is there a way to apply this fix to all pages with a hero title?

[Bill Robbins]

Hi Ryan,

The way CSS works, you want to set the default style to cover the greatest number of situations and then override that in more specific ones that occur less frequently.

Do most of your pages have a full sized hero button, or do they leave that out? If only a few have the button, it’ll be easier to just change those instead of changing all the others one by one.

Let me know and we’ll go from there,
Bill

[Ryan Hennesy]

Well, no… the only page that has a button is the home page. But all the other pages that have titles without buttons are being affected. Most of the pages have hero titles without buttons.

The Events page, for instance, doesn’t have a hero button at all.

Thanks for you work on this. This seems like a pretty unique problem.

Ryan

[Bill Robbins]

Since it’s only the home page, we just need to alter the code that made the buttons full screen so it only affects the home page. Take out the snippet above and find this one:

@media only screen and (min-width: 768px) {

	.hero-copy {
		position: static;
		padding-top: 20%;
		width: 100%;
		padding-left: 10%;
		padding-right: 10%;
	}
	
	#hero-section .button {
		position: absolute;
		color: rgba(255, 255, 255, 0);
		background-color: rgba(255, 255, 255, 0);
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}

}

and change it to be like this:

@media only screen and (min-width: 768px) {

	.home .hero-copy {
		position: static;
		padding-top: 20%;
		width: 100%;
		padding-left: 10%;
		padding-right: 10%;
	}
	
	.home #hero-section .button {
		position: absolute;
		color: rgba(255, 255, 255, 0);
		background-color: rgba(255, 255, 255, 0);
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}

}

and see if that doesn’t improve the situation. It should just affect the home page that way.

Let me know if it gives you any trouble,
Bill

[Ryan Hennesy]

Nailed it.

Thanks.

For future reference, if I do want to add a full-sized Hero section link, I can copy this code and change the .home portion to refer to the specific page I want to change…?

Otherwise, the Hero button should function normally.

Ryan

[Bill Robbins]

Glad that did the trick. If you do need to make this work on another page, you can swap out the .home for .page-id-# where # is the actual ID number of the page you’re editing. WordPress adds a unique body class to each page/post so that we can apply styling just to that page.

I did notice after the fact that this code was from the Elite theme. It positions the hero content a bit differently from Kerygma. Kerygma’s text scrolls at a different rate than the background and fades out and to accomplish that, I had to set it up a bit differently. That may be what cause part of the trouble there. If it’s working though, ?.

[Author]

Posts