This should take care of that, use the code in Additional CSS section.
.no-widgets .site-footer { margin-top: 0; }
On a sidenote, the color contrast on social links and its background seems too low making it difficult to see.
rod
(@nomadarod)
Hi Paul, thanks for passing by.
It didn’t work. It does in the inspector but not when I add the css in my child-theme. I tried also #colophon.no-widgets .site-footer and nothing.
Yeah, the social links .class to change their color is another quest. Any ideas?
Hi Rod,
I’ve just updated the Options for Twenty Twenty-One plugin so that “Customizer – Footer Options – Footer Margin Top” slider now works when you don’t have any widgets (such as with your website) as I know you use the plugin.
Let me know if that does what you require.
I’ll add a colour picker for the social icons and let you know when that’s done.
Oliver
I can confirm that the code work (via web deb tool I directly put that into child theme’s style.css). Could it be that your browser cache prevented the change to appear?
Also if you want to use #colophon the selector must be like this
.no-widgets #colophon.site-footer { }
but in this case, it’s not necessary to add #colophon
This is to change social icon color
.footer-navigation-wrapper li .svg-icon { fill: #fff !important; }
Just to update this thread, there is now a colour picker in the plugin Options for Twenty Twenty-One to choose a default colour for the social icons in the footer.
Oliver
rod
(@nomadarod)
Hi,
Thanks Paul, for sharing the css selector.
Thanks Oliver. I tested both new features for the footer margin and the social icons and they work great 🙂
