Align footer content

Support
#1

Hi,

I have only 2 elements in my footer: “Menu” and “text”.
I don´t want it to be centered. It should be in one line. One element at the left side and the other one aligned to the right. How can I align my content?

https://wp-ludwigshafen.feg.de/

Kind regards

#2

Hi Anna,

Thank you for reaching out to us. To do this, add the following code in the Theme Options > CSS:

.x-colophon.bottom .x-nav {
    float: left;
    width: 50%;
    margin: 0;
}

.x-colophon.bottom .x-colophon-content {
    float: right;
    width: 50%;
    margin: 0;
}

.x-colophon.bottom .x-colophon-content h4 {
    margin-top: 0
}

.x-colophon.bottom:before, .x-colophon.bottom:after {
    content: '';
    clear: both;
    display: table;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Hope this helps!

#3

Thanks so far, but I also wanted the content to be in one row. Is this also possible with css?

Kind regards

Anna

#4

Hi Anna,

Could you please try adding the following CSS rule as well into your X -> Theme Options -> CSS area.

.x-colophon.bottom .x-colophon-content h4 {
    float: left;
    margin-right: 10px;
}

Hope that helps.

#5

Hi, thanks for helping out, but it is still not working correctly.

#6

Content is not in one line. Is this because of padding?

#7

Hello Anna,

Thanks for updating the thread. :slight_smile:

Please add following CSS under X > Theme Options > CSS:

.x-colophon.bottom .x-colophon-content h4 {
    margin-top: -6.5px !important;
}

Thanks.

#8

Perfect-thanks!

#9

You are most welcome!

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.