Footer center css

Support
#1

hi there,
i am using this css to center the footer:

footer.x-colophon {
background-color: silver !important;
width: 1200px;
left: 50% ;
margin-left: -600px;
}

it seems a little too creative to me :wink: is there a better (saver) solution for that? my theme uses full width with 1200px for content.

thanks a lot! kai

#2

Hello Kai,

Can you please provide the URL of your site so that we can check it?

Thank you.

#3

hi jade,
thanks for your quick reply!
just to make sure. the footer looks ok now with my code. i was just wondering if this is a good way to center it (and limit the with to 1200px) or if the theme provides a better way.
url in the secure note :wink: best wishes, kai

#4

Hey Kai,

Thank you for sharing the URL. I checked your site and your footer is empty, there is no element in it. However your code may cause issues, I’d recommend you to use one of these strategies listed here https://css-tricks.com/centering-css-complete-guide/

Please note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Thanks!

#5

hey nabeel,

thanks a lot! it works if i adress x-colophon only:

.x-colophon {
width: 1200px;
margin: 0 auto;
}

that is correct now? and there is no way to do it with theme settings i guess?

best wishes, kai

#6

Hey Kai,

If that works for your project in all screen sizes then that’s good. We can’t really provide specific custom coding advice or provide custom coding support in general.

I just like to add here that our X or the Original Footer is already centered and its contents contained based on the Site Max Width option out of the box. If that is no working on your end, a custom code your added to your site might be causing the issue so if this is the case, you need to inspect all your custom CSS.

image
image733×318 29.4 KB

If custom coding is not feasible for you, I’d recommend you upgrade to Pro so you’ll have a Footer Builder and we’ll help you if you get stuck with the Pro Footer setup.

If upgrading to Pro is not what you want, you need to learn more CSS and also learn how to use the browser’s element inspector. If you get stuck with custom coding though, you’d need to consult with a 3rd party developer.

Thanks for understanding.

#7

dear christian,
thanks for your reply!
please have another look at the website in question. see above secure note.
i removed my css because it did not work in mobile view.
now the footer goes full width. but the content does not. i set the theme to 1200px. but also to full width since i do not need the sidebars.
i used the pro theme once and hesitate to use it again because it was much more time consuming to work with. especially since my designs are usually simple enough for the regualar theme…
thanks again for checking! best wishes, kai

#8

Hi Kai,

The responsive way of controlling the layout is by max-width instead of just width. For example, this should work

.x-colophon {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}

That is just a sample to explain the differences, but it’s recommended way to center a layout while not affecting its responsive behavior on smaller devices.

Thanks!

#9

thanks a million rad! that works also on mobile :slight_smile:
i really miss this option in the theme and can’t find what christian was referring to when saying:
I just like to add here that our X or the Original Footer is already centered and its contents contained based on the Site Max Width option out of the box.
best wishes, kai

#10

something else i miss are color options for the footer menu links. is that also only possible with custom css? would you have some for me? mine does not work… :wink: thanks a lot! kai

.x-colophon a:hover {
color: red !important;
}

.x-colophon a:link {
color: black !important;
}
.x-colophon a:visited {
color: black !important;
}

#11

Hi Kai,

Glad it worked, for your last question, the correct selector is .x-colophon.bottom .x-nav li a, please check this video https://www.youtube.com/watch?v=GMk7ZLuo6Po about selector and how you can get them through browser developer console.

Thanks!

#12

dear rad,
thanks a lot for the selector and the video (for a german a challenging english :wink: )
i tried quite a while applying the technic explained in the video but never even came close to your selector. maybe there is still more to it!?
thanks again! kai

#13

Hello Kai,

You can try checking more resources about how to come up with CSS selectors using the dev tools:

Hope this helps.

#14

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