- This topic has 23 replies, 2 voices, and was last updated 4 years, 10 months ago by Andrew Misplon.
Tagged: footer column width
- AuthorPosts
- December 3, 2019 at 2:03 pm #13607
jfcyrParticipantHello
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 ?December 3, 2019 at 4:13 pm #13608
Andrew MisplonKeymasterHi 🙂
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.
December 3, 2019 at 4:34 pm #13609
jfcyrParticipantHello
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%?December 8, 2019 at 11:07 am #13629
Andrew MisplonKeymasterThis reply has been marked as private.December 8, 2019 at 11:24 am #13631
Andrew MisplonKeymasterSure, 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%; }
December 8, 2019 at 11:25 am #13632
Andrew MisplonKeymasterIf 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.
December 9, 2019 at 4:24 pm #13648
jfcyrParticipantHello 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:
December 9, 2019 at 7:59 pm #13650
Andrew MisplonKeymasterThanks 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.
December 9, 2019 at 8:27 pm #13655
jfcyrParticipantHello
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 ?December 9, 2019 at 8:32 pm #13656
Andrew MisplonKeymasterCould 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.
December 9, 2019 at 8:34 pm #13657
jfcyrParticipantIt is already removed.
December 9, 2019 at 8:35 pm #13658
jfcyrParticipantI have re-saved the CSS
December 9, 2019 at 8:36 pm #13659
Andrew MisplonKeymasterIs there perhaps caching in place? I still see the rule, even in private browsing mode.
December 9, 2019 at 8:38 pm #13660
jfcyrParticipantNot that I know… I have flushed the cache in the backend and in the “Managed WordPress” GoDaddy utility…
No changeDecember 9, 2019 at 8:40 pm #13661
Andrew MisplonKeymasterSorry, there is
2.5%
x2
margin to account for so please, try making your total95%
. Make the third-widget in English45%
. - AuthorPosts
You must be logged in to reply to this topic.