[Resolved] Formatting in generate_before_footer_content hook

Home Forums Support Formatting in generate_before_footer_content hook

  • This topic has 9 replies, 4 voices, and was last updated 12 months ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #894443
    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.

    #894448
    Leo
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #894453
    Kris

    Hi Leo,

    Of course it was a missing semi-colon.

    Thanks much,
    Kris

    #894456
    Leo
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #894459
    Kris

    Thanks again for the follow up. Fixed.

    Thanks!

    #894469
    Leo
    Staff
    Customer Support
    #1146753
    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:

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

    Thank you in advance

    #1147342
    David
    Staff
    Customer Support

    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

    #1147369
    Jose

    Thank you, David.

    #1147410
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.