Hero Title and Caption out of place
Support Area › Forums › Kerygma › Hero Title and Caption out of place
- This topic has 9 replies, 2 voices, and was last updated 7 years, 10 months ago by Bill Robbins.
-
AuthorPosts
-
April 17, 2016 at 08:49 #36385Ryan HennesyParticipant
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,
RyanApril 18, 2016 at 09:06 #36395Bill RobbinsModeratorHi 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,
BillApril 24, 2016 at 10:19 #36540Ryan HennesyParticipantHi 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
April 24, 2016 at 16:38 #36544Bill RobbinsModeratorHi 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,
BillApril 25, 2016 at 07:47 #36545Ryan HennesyParticipantThat 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?
April 25, 2016 at 09:33 #36546Bill RobbinsModeratorHi 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,
BillApril 25, 2016 at 09:38 #36547Ryan HennesyParticipantWell, 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
April 25, 2016 at 09:48 #36548Bill RobbinsModeratorSince 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,
BillApril 25, 2016 at 09:55 #36549Ryan HennesyParticipantNailed 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
April 25, 2016 at 10:00 #36551Bill RobbinsModeratorGlad 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, ?.
-
AuthorPosts
- The topic ‘Hero Title and Caption out of place’ is closed to new replies.