Controlling column width for widgets in in 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%?

This reply has been marked as private.

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:
http://oby.454.myftpupload.com

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.

It is already removed.

I have re-saved the CSS

Is there perhaps caching in place? I still see the rule, even in private browsing mode.

Not that I know… I have flushed the cache in the backend and in the “Managed WordPress” GoDaddy utility…
No change

Sorry, there is 2.5% x 2 margin to account for so please, try making your total 95%. Make the third-widget in English 45%.

GOT IT !
It seems to work as intended now !
BTW there is a strange behaviour with the Custom CSS plug-in where you loose the “Save” button and have to click on the Custom CSS text in the left pane to regain it. You would not know anything about that would you ?