Spacing of Social Icons

[natejacobson]

There's a coffee on me for whoever is able to determine why the social icons in WordPress installs are aligned too tightly (right).

All the relevant properties seem identical.

To do your own comparison, you could compare...

https://repo.wsu.edu/spine/1/tests/grid_fluid.html

To

http://brand.wsu.edu

[jeremyfelt]

There is whitespace between the <li> elements in the grid fluid test HTML. When displayed as inline-block, this whitespace annoyingly appears.

I guess the fix here could be to add whitespace to the generation of the social icons. I'm not sure what the best scenario to plan on is.

[jeremyfelt]

For visual comparion:

Grid Fluid:

    <nav id="wsu-social-channels" class="spine-social-channels">
        <ul>
            <li class="facebook-channel"><a href="http://facebook.com/wsupullman">Facebook</a></li>
            <li class="twitter-channel"><a href="http://twitter.com/wsupullman">Twitter</a></li>
            <li class="youtube-channel"><a href="http://www.youtube.com/washingtonstateuniv">YouTube</a></li>
            <li class="directory-channel"><a href="http://social.wsu.edu">Directory</a></li>
        </ul>
    </nav>

Brand:

    <nav id="wsu-social-channels" class="spine-social-channels">
        <ul>
        <li class="facebook-channel"><a href="http://www.facebook.com/WSUPullman">facebook</a></li><li class="twitter-channel"><a href="http://twitter.com/wsupullman">twitter</a></li><li class="youtube-channel"><a href="http://www.youtube.com/washingtonstateuniv">youtube</a></li><li class="directory-channel"><a href="http://social.wsu.edu">directory</a></li>        </ul>
    </nav>

[jeremyfelt]

And for the specific fix, a carriage return in this loop would generate the whitespace.

[natejacobson]

Don't let me forget to buy you that coffee, @jeremyfelt.