[Resolved] Formatting in generate_before_footer_content hook

[Kris]

Hi,
I need to format a heading in the generate_before_footer_content hook. I have the h3 in place. I wrapped this in a div with a class=”site-footer-tagline”.

Text white
Background green and fills the area of the container.
Centered vertically.

So about the same as the copyright footer.

Thanks, Kris.

[Leo]

Hi there,

Your existing CSS is missing a ;:
https://www.screencast.com/t/FiHrhz7bG

Try this for the full CSS:

.site-footer-tagline {
    background-color: #000000;
    text-align: center;
}
.site-footer-tagline h3 {
    color: #ffffff;
    margin-bottom: 0;
}

Let me know if this helps 🙂

[Kris]

Hi Leo,

Of course it was a missing semi-colon.

Thanks much,
Kris

[Leo]

No problem 🙂

Just a small thing. I would add the padding property to the .site-footer-tagline part instead of .site-footer-tagline h3

Doesn’t matter too much here but it’s just good practice as the padding property is usually applied to the container itself 🙂

[Kris]

Thanks again for the follow up. Fixed.

Thanks!

[Leo]

No problem 🙂

[Jose]

Hi Leo,

Thank you for all details, I could set up my footer CTA.

¿How can I make it work on mobile?, Also to change the font size (mobile) so the CTA fits in 1 line

See how it looks on desktop:
https://proyectovidaplena.com/levantarse-temprano/

Code:

<h2><span style=”color: #fff; font-size:36px”>Consigue el balance de tu vida</span></h2>
DESCUBRIR CÓMO

CSS
.site-footer-tagline {
background-color: #1D3050;
text-align: center;
padding-top: 100px;
padding-bottom: 110px;
}

Thank you in advance

[David]

Hi there,

in your Simple CSS you have a media query that opens but does not close.

Look for this:

@media (min-width: 768px) {

    .page .entry-header,
    .post .entry-header {
        margin-left: -220px;
        margin-right: -200px;
        text-align: center;
    }

And change it to:

@media (min-width: 768px) {

    .page .entry-header,
    .post .entry-header {
        margin-left: -220px;
        margin-right: -200px;
        text-align: center;
    }
}

Your site-footer-tagline styles will now work on mobile

[Jose]

Thank you, David.

[David]

You’re welcome

[Author]

Posts