Managing Footer widget spacing

[Annamarie]

Hi,

I think this is a fair question. There must be a better way than I know to space the footer widgets (and content) so that they are even across the page, at least until it gets small enough to start stacking.

I've played with various options - none seem to do it.

Thanks.

http://test.sharinghousing.com

http://test.sharinghousing.com

[brettatkin]

There is a fixed width for the footer widget divs (270px). It should be a percentage. Is this the default for theme or did you change it?

[Annamarie]

Hi there. Thanks for responding. I changed it in an attempt to get the spacing. I thought I was being clever using footer widgets. I'm rethinking. Think I should put my links in a simple footer. Right?

[brettatkin]

This isn't an issue with the footer widgets. The theme is set up for 3 footer columns I believe. When you restore the original CSS code, do the columns line up and resize correctly?

[Annamarie]

I believe the only change I made was to bottom padding.. I think I've reverted to the vanilla version. It looks strange..

Ideas?

[Erik D. Slater]

OK. Here's the dealsy wealsy. In style.css, do the following:

line 2709: change width: 270px; to width: 33.33%;

line 2721: remove margin-right: 60px;

line 2845: remove .footer-widgets-1,, .footer-widgets-2, and .footer-widgets-3,

line 2861: remove margin-right: 30px;

line 3005: remove padding-left: 1em; (which translates to a left padding of 36px, btw)

That should do the ole tricksy wicksy there ... otherwise, I'll video myself eating a hat ... I'll even post the link here 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Annamarie]

Well I almost told you to eat your hat then I realized I wasn't connected to the server. D'oh. Still the spacing is off. And I'm thinking I'd be better off using a simple footer. Now to go try that!

Thanks.

[Erik D. Slater]

I see it. Let me take a quick looksy ...

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Erik D. Slater]

line 2707: add text-align: center; to .footer-widgets-1, .footer-widgets-2, and .footer-widgets-3 ...

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Annamarie]

That was fast! You must be on the other side of the ocean. No coder is up at this hour EDT!

I DID the text centering.. there's something funky about the text box spacing on each of the widgets. They aren't the same size. WHY?

[Erik D. Slater]

I'm ... everywhere 🙂 Well ... not really ...

The only thing I notice is the top padding of 13px ... which you may want to change to 20px ... to balance out the bottom margin of 20px on the "section" styling.

Might that be it? If not, make some screenshots ...

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Erik D. Slater]

Have a look at this screenshot ...

This is how things look when I change the top padding to 20px ... and temporarily modify the colour of the middle widget. It looks good to me ... and I'm a fusspot 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Annamarie]

Yes, your screenshot looks great. Looks fine on Chrome. But not on Safari .. here is screenshot.
(Hope that link works..)

[Erik D. Slater]

Yep, I see - and feel - your pain there.

(Un)fortunately, I'm a Windows sort ... so your footer widgets look great on the five major browsers on my PC ... including Safari (which stopped being supported on Windows as of version 5.1.7) ... and my mobile device ...

Does the problem persist when you are not logged into WordPress? I'm just wondering if the "Edit" option is somehow screwing things up. I wouldn't have thought it would, but you never know ...

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Annamarie]

Interesting. Thanks for sticking with me and assuring me it looks good for you. It seems to have resolved on my Safari.

On to the next battle! : ) (It would be so much easier if this is the only thing I did in my life.)

Annamarie

[Author]

Posts