How to add a background color to a single column footer

[blaouchez]

How to add a background color to a single column footer (via css)?

Exemple : http://www.descente.com

[Mohammad – SUPPORT]

Hi,
Please use this custom css code :
div.info-footer{background:#fff !important}
Hope that should work and let me know your feedback.
Thanks

[blaouchez]

It don’t work

[Mohammad – SUPPORT]

Hi,
Please put this css code at Admin -> Theme Options -> Custom CSS. Hope that work and let me know your feedback.
Thanks

[blaouchez]

Hello there,
it still does not work.
And how to apply a style only to a column?
Thanks

[Kyle – SUPPORT]

Hi

I would need to see your link to provide you with the correct CSS

– Kyle

[blaouchez]

Link test : http://cluster007.ovh.net/~montourckh/

div.info-footer{
	background-color: #F00;
}

[Kyle – SUPPORT]

Hi

It doesn’t look too good when adding a background to the columns, as you can see if you add this to your custom css:

#footer-widgets > .span3:first-child {
  background-color: #efefef;
}

– Kyle

[blaouchez]

Kyle thank you, it works but not on the total height of the footer.

Otherwise, it’s ok for column 1 but how to modify the other columns?

The ideal example : http://www.descente.com

[Mohammad – SUPPORT]

Hi,
Please use this css code selector for 2,3,4 column repectively:

#footer-widgets > .span3:nth-child(2) { background-color: #ffffff;} 
#footer-widgets > .span3:nth-child(3) { background-color: #ffffff;}
#footer-widgets > .span3:nth-child(4) { background-color: #5777AB;}
/*FUll HEIGHT*/
#footer{padding:0px  !important}

Hope that should help your
Thanks 🙂
With Best Regards
Swift Ideas

[blaouchez]

This is great, thank you!!! And just one last question on this footer:
how to remove space between columns?

[Kyle – SUPPORT]

Hi

Add this:

@media only screen and (min-width: 768px) { 
.span3 {
  width: 25%;
  margin: 0;
}
}

– Kyle

[blaouchez]

Column 1 of the footer is not justified on the text to the left.
It’s ok for right justification

[Kyle – SUPPORT]

If you loo, you will see it’s lined up with the logo. It’s your page content which has the indent

– Kyle

[blaouchez]

Ok but if I center the page in my browser, there is extra space to the right indicating a gap

I have not applied for withdrawal to my text

How to align log + text + footer?