Archived topic
Reduce the gap between three footer widgets
3 replies · Started by Mike on June 22, 2022
At the site provided in the private info box, I have three footer widgets that contain simple HTML. I don't want to reveal the site publicly as it's not launched yet.
I want to reduce the spacing between the boxes so that one box is centered and the other two are closer to it, equally spaced. This needs to work on all screen resolutions where the footer doesn't collapse to three widgets in a column.
Note I don't want to have text centered, that should stay left aligned to the bullets.
I can't see how to do this and none of the support articles I checked seem to match it.
Any chance of some tips?
thank you
Mike
The CSS for the footer widgets is like this:
/* Footer */
.footer-widgets .footer-widget-1 {
flex-basis: 33.333%;
}
.footer-widgets .footer-widget-2 {
flex-basis: 33.333%;
}
.footer-widgets .footer-widget-3 {
flex-basis: 33.333%;
}
.inside-footer-widgets .dashicons {
margin-top: 8px;
margin-right: 15px;
margin-left: 5px;
}
.inside-footer-widgets .widget.inner-padding.widget_block {
margin-bottom: 20px;
}
div.footer-widgets ul li {
margin-left: 30px;
list-style-type: disc;
color: #c00000;
}
Hi Mike,
To clarify, are you wanting something like this: https://share.getcloudapp.com/jkuXLoYr
If so, kindly modify your code to something like this:
/* Footer */
.inside-footer-widgets>div {
flex: unset;
}
.inside-footer-widgets {
justify-content: space-evenly;
}
.inside-footer-widgets .dashicons {
margin-top: 8px;
margin-right: 15px;
margin-left: 5px;
}
.inside-footer-widgets .widget.inner-padding.widget_block {
margin-bottom: 20px;
}
div.footer-widgets ul li {
margin-left: 30px;
list-style-type: disc;
color: #c00000;
}Hope this helps!
Hi Fernando, that's great, thank you!
Given the other CSS was site specific, I can imagine just this part will help others to create the effect of having the most optimum, centred approach to three equal sized footer widgets. Thanks for you expertise!
/* Footer */
.inside-footer-widgets>div {
flex: unset;
}
.inside-footer-widgets {
justify-content: space-evenly;
}
You’re welcome Mike! Glad that worked!
