Social media icons displaying vertically instead of horizontally

  • Unknown's avatar
    byjessicajo · Member ·

    My social icons are displaying vertically instead of horizontally, how do I change them?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    jeremeylduvall · Member ·

    Hi there,

    Can you try replacing the text you’re currently using for the social icons with the following?

    <table>
<tr>
<td>
<a href="https://twitter.com/xojessicajo">
<img title="Twitter" alt="Twitter" src="http://socialmediawidgets.files.wordpress.com/2014/03/01_twitter.png" width="35" height="35" />
</a>
</td>
<td>
<a href="http://www.pinterest.com/xojessicajo/">
<img title="Pinterest" alt="Pinterest" src="http://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest.png" width="35" height="35" />
</a>
</td>
<td>
<a href="https://www.facebook.com/pages/Social-Media-Creative-and-Consulting-by-Jessica-Jo/261440380731453">
<img title="Facebook" alt="Facebook" src="http://socialmediawidgets.files.wordpress.com/2014/03/02_facebook.png" width="35" height="35" />
</a>
</td>
<td>
<a href="https://www.linkedin.com/profile/view?id=184670858&trk=nav_responsive_tab_profile">
<img title="LinkedIn" alt="LinkedIn" src="http://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin.png" width="35" height="35" />
</a>
</td>
<td>
<a href="http://instagram.com/xojessicajo">
<img title="Instagram" alt="RSS" src="http://socialmediawidgets.files.wordpress.com/2014/03/10_instagram.png" width="35" height="35" />
</a>
</td>
</tr>
</table>

    Let me know if that works!

  • Unknown's avatar
    byjessicajo · Member ·

    That DID work. Thank you so much!

  • Unknown's avatar
    jeremeylduvall · Member ·

    Great! Now, I’m going to throw you a curve ball and ask you to switch to this :). There are several benefits to not using a table format and using display:flex instead. I just couldn’t get it to work right away. The following code should look exactly the same as the table (it will just work better)!

    <div style="display:flex;"><a href="https://twitter.com/xojessicajo">
<img title="Twitter" alt="Twitter" src="http://socialmediawidgets.files.wordpress.com/2014/03/01_twitter.png" width="35" height="35" />
</a>

<a href="http://www.pinterest.com/xojessicajo/">
<img title="Pinterest" alt="Pinterest" src="http://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest.png" width="35" height="35" />
</a>

<a href="https://www.facebook.com/pages/Social-Media-Creative-and-Consulting-by-Jessica-Jo/261440380731453">
<img title="Facebook" alt="Facebook" src="http://socialmediawidgets.files.wordpress.com/2014/03/02_facebook.png" width="35" height="35" />
</a>

<a href="https://www.linkedin.com/profile/view?id=184670858&trk=nav_responsive_tab_profile">
<img title="LinkedIn" alt="LinkedIn" src="http://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin.png" width="35" height="35" />
</a>

<a href="http://instagram.com/xojessicajo">
<img title="Instagram" alt="RSS" src="http://socialmediawidgets.files.wordpress.com/2014/03/10_instagram.png" width="35" height="35" />
</a>
</div>
  • Unknown's avatar
    byjessicajo · Member ·

    Did it. I want question your genius lol

  • Unknown's avatar
    jeremeylduvall · Member ·

    Glad it worked! :)

  • Unknown's avatar
    byjessicajo · Member ·

    I was just looking and I noticed that they are still displaying vertically on Apple products (iPhone Safari and desktop Safari). Do you know why this could be?

  • Unknown's avatar
    jeremeylduvall · Member ·

    Hey Jessica,

    Oy! It looks like the flex property is not playing nice with mobile. Can you revert back to the table HTML suggested here?

    https://en.forums.wordpress.com/topic/social-media-icons-displaying-vertically-instead-of-horizontally?replies=7#post-2017601

    That should do the trick. I played with the widget area, and it looks like the table format should work fine.

  • Unknown's avatar
    byjessicajo · Member ·

    That worked. Thanks!

  • Unknown's avatar
    jeremeylduvall · Member ·

    Not a problem!

  • The topic ‘Social media icons displaying vertically instead of horizontally’ is closed to new replies.