Have the copyright and the footer menu on the same vertical alignment. Ethos

Support
#1

Hi, I’m struggling with this. I have the copyright notice on the left and the footer menu on the right of my footer but I can’t get them to align vertically, there is always at least a line height space between them. Any help would be very welcome.

#2

Hi There,

Please provide your URL so we can take a closer look.

Thank you

#4

Hello There,

Thanks for updating in! To resolve your issue, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(min-width: 768px){
    .x-colophon.bottom .x-nav {
        float: right;
    }

    .x-colophon.bottom .x-colophon-content {
        float: left;
        margin-top: -5px !important;
    }
    
    .x-colophon.bottom .x-nav{
        margin: 0 auto !important;
    }
}

Hope this helps. Please let us know how it goes.

#5

Perfect! Thank you very much! Keep up the great work!

#6

You are most welcome. :slight_smile:

#7

Hi, thank you for this. I’m confused as to why this page has a large grey space below the footer. Can you see an issue there so I can make it match the other footers on the site?

http://aminternetdesign.co.uk/wptest/post-page/

Summary

This text will be hidden

#8

Hi There,

That is because you dont have enough content on your page.

Please add to the style box of the section: min-height: 100vh;

That should solve the issue.

Hope it helps

#9

Hi, thank you. That is better, but the footer is still a very thin height and grey underneath. Anyway to fix that?

#10

Hello @aminternetdesign,

Please add following CSS to fix the footer interface:

@media only screen and (min-width: 900px) {
    footer.x-colophon.bottom {
    min-height: 50px;
    margin-bottom: 0 !important;
}

footer.x-colophon.bottom .x-container.max.width {
    margin-top: 30px;
}
}

Once you add the CSS the output would look something like this:

Thanks.

#11

Hi, thankyou that works on desktop, but on mobile view you can see the copyright notice is pushed higher? What do I need to do to fix that?
Thank you

#12

Hi,

You can add this CSS code as well

.x-colophon.bottom .x-nav {
    line-height: 14px !important;
}

.x-colophon.bottom .x-colophon-content {
    width: auto;
    float: left;
    margin-top: 0 !important;
}

Hope that helps.

#13

Thank you Paul! :slight_smile:

#14

You’re welcome! :slight_smile: