Docs

[newskywebsites]

Hi there, is it possible to customize the footer columns so there is a layout like 1/2 + 1/4 + 1/4 ? In other words, I’d like 3 columns, but I want the first column to be double wide. This needs to be responsive somehow still too.

Site is http://newsite.benfranklincraftswi.com/ – Latest version of everything.

Thanks!
Dawn

[newskywebsites]

NOTE: I tried to fudge this with a 4 column layout and a wide map in the first column, then a gap in 2nd column. But on smaller screens it overlaps. See screenshots. I want it to look like #1 but on smaller screens it overlaps as shown on #2.

I’m sure there’s a better way?

Thanks!
Dawn

[Christian]

Hey Dawn,

Please add the code below in your Appearance > Customize > Custom > Global CSS

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

The actual thing that causes the overlap though is your fixed width Google Map in the footer. The code I’ve given will cut it off to prevent it. If you want a responsive Google Map, you might want to check this article http://www.labnol.org/internet/embed-responsive-google-maps/28333/

Thanks.

[newskywebsites]

Wow, what a beautiful thing! That worked perfectly and you were lightning fast in your response. Thanks so much!!

[Rahul]

Glad we were able to help you out!

Whenever you have questions, please ask us, for us it is really important that you have a good experience with X. 🙂

Thanks!

[newskywebsites]

Rahul, unfortunately this isn’t working today for some reason. I must have added something else that messed up your code. Can you take a look?

url: http://newsite.benfranklincraftswi.com/

Latest version of WP, X and Child theme. Renew stack.

See screenshots. Footer area #2 is not visible on site…

Thanks!
Dawn

[newskywebsites]

This reply has been marked as private.

[Friech]

Hi Dawn,

This block is hiding the second column.

.x-colophon .x-column.x-md:nth-child(2)  {
    display: none
}

I’ve commented out the CSS code provided above and added JS code below to make your footer widget area a 1/2 + 1/4 + 1/4

(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));

I’ve also applied a width: 100% on the Map (iFrame) so it will respond on the column width all the time.

Hope it helps, Cheers!

[newskywebsites]

I’m sorry, but that didn’t seem to help. The first column still isn’t spreading across 1/2 width…? Can you please take another look?

Thanks!
Dawn

[newskywebsites]

This reply has been marked as private.

[newskywebsites]

Please disregard. I re-installed my child theme and everything works now. It’s all good! Thanks!!

[Joao]

Glad to hear it Dawn 🙂

Thanks for letting us know,

Joao

[P Hammond]

Following up on this thread, I have made this change to my footer but it looks awful on mobile! How can I get this effect on desktop only?
Thank you!

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[P Hammond]

Thanks, Joao. No problem, it’s in dev right now. You can find it here: http://mitb.flywheelsites.com/
The footer columns are perfect on desktop, larger screens, but SM and XS, the percentages don’t look so nice.

[Author]

Posts