Docs

[newskywebsites]

Hi there,

I’m using some CSS you gave me from another project to try and have a footer widget area with 3 columns, but the column widths should be 1/2 + 1/4 + 1/4. However, it is not showing all 3 columns. Instead, just columns #1 and #3 are showing up. Can you please help me?

Website url: http://meyer-mab.dev-website.us/
Latest version of X with child theme (renew stack), cornerstone and all plugins.

Here is my CSS related to this issue:

.x-colophon .x-column.x-md:nth-child(2) {
display: none
}
.x-colophon .x-column.x-md:first-child {
width: 45%;
overflow: hidden
}

Also attaching screenshot showing I have content in all 3 footer widget areas.

Thanks so much!
Dawn

[newskywebsites]

Forgive me for jumping the gun. I found my notes on this. For anyone following this post, I had to add custom CSS as well as JS.

CSS:
/* 1/2+1/4+1/4 footer with 3 columns */

/*.x-colophon .x-column.x-md:nth-child(2) {
display: none
}
.x-colophon .x-column.x-md:first-child {
width: 45%;
overflow: hidden
}*/

Javascript:
(function ($) {
$.fn.replaceClass = function (pFromClass, pToClass) {
return this.removeClass(pFromClass).addClass(pToClass);
};
$(‘footer.x-colophon.top .x-column:first-child’).replaceClass(‘x-1-3′,’x-1-2’);
$(‘footer.x-colophon.top .x-column:not(:first-child)’).replaceClass(‘x-1-3′,’x-1-4’);
}(jQuery));

It works now. If there’s a better way, feel free to let me know.

Thanks!
Dawn

[Jade]

Glad to hear you got it sorted, Dawn.

Cheers!

[Author]

Posts