Archived topic
Formatting in generate_before_footer_content hook
9 replies · Started by Kris on May 9, 2019
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.
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 :)
Hi Leo,
Of course it was a missing semi-colon.
Thanks much,
Kris
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 :)
Thanks again for the follow up. Fixed.
Thanks!
No problem :)
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:
CSS
.site-footer-tagline {
background-color: #1D3050;
text-align: center;
padding-top: 100px;
padding-bottom: 110px;
}
Thank you in advance
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
Thank you, David.
You're welcome