CSS columns not working correctly in Chrome and Opera

egoselfaxis
egoselfaxis used Ask the Experts™
on
I'm trying to fix an annoying CSS bug on a WordPress site that I'm developing and am hoping that someone here can help me.  If you view this page in either Firefox, Edge, or IE11 and scroll down to the bottom -- you'll notice that the 2 social icons are being displayed to the right of the 3 links (ie: Privacy Policy, Terms of Use, Sitemap).  

https://rgc.touchstoneliving.com/

This appears to be being achieved using this CSS rule:

.widget-pages ul {
    list-style: none;
    columns: 2;
}

Open in new window


... where "columns: 2" is suppoedly splitting the 5 different list items into 2 separate columns.  

However, .. if you view the same page using either Chrome or Opera, ..the Instragram social icon is for some reason being displayed at the bottom of the first column instead of at the top of the 2nd column.   My assumption was that the CSS would try to evenly split the 5 different list items into the 2 different columns - with the first 3 list items being displayed in the 1st column, and the remaining 2 in the 2nd column.  But obviously this isn't the case.

How can I fix this?  Is there any way that I can tweak this CSS rule somehow so that it forces the last 2 list items to be displayed in the 2nd column (in Chrome and Opera)? If so, how?

- Yvan
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Add     -webkit-column-gap: 60px;
mess with the gap width to see what happens.

Author

Commented:
Specifying a column gap of 50px kinda-sorta works -- only it's now forcing my Privacy Policy link to wrap to a 2nd line:

https://rgc.touchstoneliving.com/

I tried adding "white-space: nowrap" to the list items, .. but that seems to completely cancel out the column gap.  

- Yvan
ZeropointNRGHedge Fund Manager

Commented:
.footer .widget-pages li {
  font-size: 14px;
  line-height: 14px;
  /* margin: 0 0 10px 0; */
  font-weight: 700;
  }

try this for now.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

ZeropointNRGHedge Fund Manager

Commented:
Try this now.

.footer .widget-pages li {
  font-size: 14px;
  line-height: 14px;
 margin: 0 1 10px 0;
  font-weight: 700;
  }

Author

Commented:
No difference whatsoever.

https://rgc.touchstoneliving.com/

Author

Commented:
I just saw your revised code snippet .. but I don't believe that "margin: 0 1 10px 0;" is even valid CSS.
Regardless, I tried applying the changes but still no difference.
ZeropointNRGHedge Fund Manager

Commented:
Your site is broken all over. So I thought, meh, lol :) Works in my browser. And in IE and Edge.
ZeropointNRGHedge Fund Manager

Commented:
Brave
brave.pngChromechrome.png

Author

Commented:
Anyone else here have any suggestions?  Note that I'm using the latest versions of Chrome and Opera on a Windows 10 PC.

Author

Commented:
You're not being at all helpful.  I kindly ask that you please stay out of this discussion.
ZeropointNRGHedge Fund Manager

Commented:
No problem.
I've decided to move my social icons to a different footer column.  Webkit's implementation of the "columns" CSS property is a bit too buggy for me to wrestle with at this point in time.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial