Archived topic
center footer with one widget
11 replies · Started by Eva on July 4, 2019
Hi,
There are many topics about centering the footer widget, but I just can't find what I am looking for. I am using 1 footer widget and want to center it (not the text!).
The footer is full width, inside and outside (2000 px)
Footer Widget Area Padding: 10, 300, 10, 300
And I added some extra css:
.footer-widgets {
width:100%;
text-align:left;
}
@media (max-width: 768px) {
.footer-widgets {
padding: 20px;
}
}
Still it's not centered, the footer-bar is.
The site is in maintenance mode, so unfortunately I can't show it...
Any ideas?
Thanks for the support!
Eva
Hi there,
Any chance you can link us to the site in question?
You can edit the original topic and use the private URL field.
Let me know :)
Hi Leo,
At the moment I can't send you a link because the site is in maintenance mode. But I think I will put it online soon, and adjust the footer later. I send you a message again when it can be seen, ok?
Thanks,
Eva
Yup just add the link in the topic when it's live and comment here again :)
Hey Leo, just added the link...
Thanks!
Replace this existing CSS:
.footer-widgets {
width: 100%;
text-align: left;
}With this:
.footer-widgets {
text-align: center;
}Let me know :)
Hey Leo,
This centers the text, I just want to center the whole widget and align the text left...
Sorry I'm a bit confused.
The widget itself should be centered by default without adding any CSS as seen here:
https://www.screencast.com/t/skalt339CGGm
Am I missing something here?
Let me know :)
What I mean is that I would like the footer widget to line with the footer text (https://prnt.sc/oci0d0 here in the red box) and then line the text left... But if that's not possible, ok...
Hi there,
remove the current CSS that is aligning the text and then try this:
.inside-footer-widgets {
display: flex;
justify-content: center;
}
.inside-footer-widgets > div {
flex-basis: 620px;
}The flex-basis property sets the optimum width of the widget - adjust this to suit your alignment requirements.
Great David, it works!!
Thank you very much.
Glad to hear that :)
