Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Footer alignment

Home Forums Support [Resolved] Footer alignment

Home Forums Support Footer alignment

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #527209
    Tanya

    Hi,

    I created a menu for the Footer area. I’d like this menu to be centered in the footer. If I use Layout > Footer > Footer bar alignment = center, the menu is centered, but the Copyright is moved underneath it, creating 2-nd line in the footer, which is not optimal.

    Is there a way to have menu centered and copyright message stay on the right of the 1-line footer?

    Thank you

    GeneratePress 2.0.2
    GP Premium 1.6
    #527268
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Give this CSS a try:

    .footer-bar-align-center .footer-bar, 
    .footer-bar-align-center .copyright-bar {
        display: inline-block;
        margin: 0 10px;
    }
    #528271
    Tanya

    Hi Tom,

    Thanks – that almost does it!
    The menu and copyright are centered. However, there seems to be some @media CSS that I am not seeing. When I resize the window to a smaller size (or check on my phone), I see that .footer-bar becomes larger, while .copyright-bar stays the same height. This creates misalignment where Copyright is placed higher than the menu. Is there a way to align these?

    Thank you

    #528798
    Tom
    Lead Developer
    Lead Developer

    Give this a shot:

    @media (max-width: 768px) {
        .copyright-bar {
            padding: 5px 0;
        }
    
        .footer-bar-align-center .footer-bar {
            margin-bottom: 0;
        }
    
        .footer-bar-align-center .footer-bar, 
        .footer-bar-align-center .copyright-bar {
            vertical-align: middle;
        }
    }
    #531312
    Tanya

    Thanks a lot, Tom.

    That worked. I tested a couple variations and turns out I just needed vertical-align: middle;
    Final version:

    /* Align footer menu and copyright */
    .footer-bar-align-center .footer-bar,
    .footer-bar-align-center .copyright-bar {
    display: inline-block;
    margin: 0 10px;
    vertical-align: middle;
    }

    #531395
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.