Hero Title and Caption out of place

Support Area Forums Kerygma Hero Title and Caption out of place

This topic contains 9 replies, has 2 voices, and was last updated by  Bill Robbins 1 year, 7 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
URL to the page in question: http://http://severnaparkumc.org/events
  • Author
    Posts
  • #36385

    Ryan Hennesy
    Participant

    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

    • This topic was modified 1 year, 7 months ago by  Ryan Hennesy.
    #36395

    Bill Robbins
    Moderator

    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

    #36540

    Ryan Hennesy
    Participant

    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

    #36544

    Bill Robbins
    Moderator

    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

    #36545

    Ryan Hennesy
    Participant

    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?

    #36546

    Bill Robbins
    Moderator

    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

    #36547

    Ryan Hennesy
    Participant

    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

    #36548

    Bill Robbins
    Moderator

    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

    #36549

    Ryan Hennesy
    Participant

    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

    #36551

    Bill Robbins
    Moderator

    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, ?.

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

The topic ‘Hero Title and Caption out of place’ is closed to new replies.