Change Footer Content Alignment

Support
#1

https://luminacbd.com/

I’d like to put the text footer content to the right, and the footer nav menu to the right, both on the same line.
Is there any CSS i can add to make this happen?
Thank you!

Jesse

#2

Hello Jesse,

Thanks for writing in!

I am not quite sure which part of the footer you are referring too. Can you please elaborate?

Having said that please add following CSS under X > Theme Options > CSS and let us know your feedback:

footer.x-colophon.bottom {
    float: right;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

Sorry i made a typo, I want the Footer Content to the right, and the Nav Menu on the left, both on the same line.

#4

Hello Jesse,

Thanks for updating the thread.

Please replace previous code with following:


@media only screen and (min-width: 960px) {
  .x-colophon.bottom .x-colophon-content {
    float: left;
    width: 40%;
}

.x-colophon.bottom .x-nav {
    float: right;
    width: 40%;
    margin-top: 0;
}
}

Thanks.

#5

How do i make it for mobile so that it just centers and stacks them? I just realized it looks great on desktop but pretty bad on mobile.

#6

Hello Jesse,

To align them in smaller screens, you also need this code:

@media only screen and (max-width: 959px) {
	.x-colophon.bottom .x-colophon-content,
	.x-colophon.bottom .x-nav {
		float: none;
		width: 100%;
	}
}

Please let us know if this works out for you.

#7

Awesome, thank you!

#8

You’re always welcome Jesse!

Cheers.

#9

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