Archived topic

spacing issue with header/footer

6 replies · Started by Davood on April 13, 2020

Viewing posts 1–7 of 7

April 13, 2020 at 3:01 am #1237030

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.

April 13, 2020 at 4:44 am #1237113

Hi there,

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

April 13, 2020 at 4:59 am #1237135

We want it to stay full width.

April 13, 2020 at 5:36 am #1237182

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;
}

April 13, 2020 at 5:42 am #1237190

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.

April 13, 2020 at 5:48 am #1237200

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

April 13, 2020 at 6:04 am #1237218

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

You're welcome

This archived topic is closed to new replies.

Start building better websites today.