- This topic has 23 replies, 2 voices, and was last updated 4 years, 4 months ago by
.
- Posts
Hello
I am working on updating our site’s footer. I will need to add a logo to the footer.
I currently have the following widgets:
-Image (new widget to display logo)
-Editor (EN)
-Editor (FR)
-Social media
As I have 2 editor widgets (one displaying French and the other one displaying English), my widget count is at 4 and the “columns” are at 25%.
The problem is that my Editors are limited horizontally and that the text now wraps whereas my social media icons widget has too much space around it.
How do I control the width of the different columns so that I can tweak the appearance of my footer ?Hi 🙂
Please, try something like the following and let me know how it goes:
@media (min-width: 769px) { .site-footer .footer-main .widget { width: 20% !important; } }Adjust the value as required.
Hello
It works… but it’s not quite right.
30% is about right for the English footer, but the French text is longer than the English and still wraps.
If I increase the value to 40 % French text is ok but now the social media icons move below the image…
Is there a way to control all the elements of the footer individually, so that the image takes about 40%, the text 40% and the social media 20%?Sure, we can set the width independently and per language. Please, try the following and adjust as required.
html:lang(fr-FR) #colophon .widget:nth-of-type(1) { width: 25%; } html:lang(fr-FR) #colophon .widget:nth-of-type(2) { width: 25%; } html:lang(fr-FR) #colophon .widget:nth-of-type(3) { width: 25%; } html:lang(fr-FR) #colophon .widget:nth-of-type(4) { width: 25%; } html:lang(en-US) #colophon .widget:nth-of-type(1) { width: 25%; } html:lang(en-US) #colophon .widget:nth-of-type(2) { width: 25%; } html:lang(en-US) #colophon .widget:nth-of-type(3) { width: 25%; } html:lang(en-US) #colophon .widget:nth-of-type(4) { width: 25%; }If for example, French has two widgets only then you’d remove:
html:lang(fr-FR) #colophon .widget:nth-of-type(3) { width: 25%; } html:lang(fr-FR) #colophon .widget:nth-of-type(4) { width: 25%; }As you don’t need to target the third and fourth widget.
Hello Andrew
I am using :/*largeur des éléments du footer */
html:lang(fr-FR) #colophon .widget:nth-of-type(1) {
width: 35%;
}html:lang(fr-FR) #colophon .widget:nth-of-type(2) {
width: 40%;
}html:lang(fr-FR) #colophon .widget:nth-of-type(3) {
width: 25%;
}html:lang(en-US) #colophon .widget:nth-of-type(1) {
width: 35%;
}html:lang(en-US) #colophon .widget:nth-of-type(2) {
width: 40%;
}html:lang(en-US) #colophon .widget:nth-of-type(3) {
width: 25%;
}I have removed the code for the 4th footer element in both languages and adjusted the width to what I thought would be suitable, but It does not seem to have any effect on the width of the footer elements. See here on our dev site:
Thanks for the feedback. It looks like a rule applied elsewhere in Custom CSS is dominating:
@media (min-width: 769px) { .site-footer .footer-main .widget { width: 20% !important; } }If you remove the above, the new rules targetting each widget should work.
Hello
You are correct. But I still cannot have the 3 widgets be on one “line” .
I have reduced the width of the first two widgets to the point that my text (middle widget, now wraps) but the right widget will not move in line with the others…:
html:lang(en-US) #colophon .widget:nth-of-type(1) {
width: 25%;
}
html:lang(en-US) #colophon .widget:nth-of-type(2) {
width: 25%;
}
html:lang(en-US) #colophon .widget:nth-of-type(3) {
width: 50%;
}
Widget no 2 has a French variant so in total I have 4 widgets, but with that code i am only controlling 3 widgets. Can that be the problem ?Could you perhaps show me the dev site without the below rule added to Custom CSS so I can see what’s happening:
@media (min-width: 769px) { .site-footer .footer-main .widget { width: 20% !important; } }I’m still seeing the above rule added.
Not that I know… I have flushed the cache in the backend and in the “Managed WordPress” GoDaddy utility…
No change
You must be logged in to reply to this topic.