[Resolved] spacing issue with header/footer

Home Forums Support spacing issue with header/footer

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1237030
    Davood

    We want the logos in the header/footer to line up no matter what size the browser window is. We also want the E in Inquire on the nav menu to line up with the 4 in the address down in the footer.

    See our mockup to gain a better understanding: https://xd.adobe.com/view/31dba228-5519-4764-5e32-8b779ab4c3b2-47ea/

    Thanks in advance for your help.

    #1237113
    David
    Staff
    Customer Support

    Hi there,

    currently your site header and footer is set to full width – do you want to keep it full width ? Let me know.

    #1237135
    Davood

    We want it to stay full width.

    #1237182
    David
    Staff
    Customer Support

    First remove this CSS:

    .footer-widget-1 {
        text-align: center;
    }

    Then add:

    /* Align Logo left */
    .footer-widget-1 {
        text-align: left;
    }
    .footer-widget-1 img {
        margin-left: 15px;
    }
    
    /* Align footer 3 widgets right */
    .footer-widget-3 {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding-right: 70px !important;
        box-sizing: border-box;
    }
    /* ensure footer 3 widgets are same width for centered content */
    .site-footer .footer-widgets-container .inner-padding {
        min-width: 280px;
    }
    #1237190
    Davood

    I had implemented similar code as you provided before contacting you. Then put it back to what it is now. I will try it again, and get back to you with screenshots if I am still having issues. Thanks for the fast reply.

    #1237200
    Davood

    Okay, after looking closer at my notes I had forgotten two things when writing my CSS

    In the code for the footer-widget-3 class I’d forgotten align-items: flex-end;
    and I had not thought to modify the padding with a min-width as you did here:

    .site-footer .footer-widgets-container .inner-padding {
        min-width: 280px;
    }

    Thanks so much for your assistance

    #1237218
    David
    Staff
    Customer Support

    That min-width is a bit ‘hackish’ but not much else i could do in that instance.

    You’re welcome

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.