How to fix custom social media buttons displaying vertically

• 

  alillico · Member · Jul 16, 2014 at 5:36 am

  • Copy link
  • Add topic to favorites

  I followed the directions here: http://en.support.wordpress.com/add-social-media-buttons-to-your-sidebar-or-footer/

  I have tried various fixes but I cannot get the buttons to display horizontally. The buttons themselves are functional.

  The buttons are showing at the bottom of my sidebar: adventureforone.com

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

• 

  alillico · Member · Jul 16, 2014 at 5:38 am

  • Copy link

  The code is in it’s own text widget.

• 

  rachelmcr · Member · Jul 16, 2014 at 2:58 pm

  • Copy link

  Hi there,

  That’s happening because the Alto theme is designed to display images in your sidebar on their own line, rather than side by side. There are a couple ways you can change that:

  One option is to make a change to the code in your widget, to add what’s called “inline CSS.” Inline CSS adds CSS directly to the image code to change the style, rather than making a change to your theme’s whole design. To do that, you can add this code to each image’s code in the widget:

  style="display:inline;"

  Here’s what that looks like, added to the code you’re using in your widget:

  <div /><a href="https://twitter.com/Adventureforone"><img src="https://heleover.files.wordpress.com/2014/07/social-icons-by-dreamstale-3.png" alt="Twitter" width="25" height="25" style="display:inline;" /></a><a href="http://www.pinterest.com/adventureforone"><img src="https://heleover.files.wordpress.com/2014/07/social-icons-by-dreamstale-24.png" alt="Pinterest" width="25" height="25" style="display:inline;" /></a><a href="mailto:(email visible only to moderators and staff)"><img title="Email" src="https://heleover.files.wordpress.com/2014/07/social-icons-by-dreamstale-68.png" alt="Email" width="25" height="25" style="display:inline;" /></a></div>

  Another option is to add that CSS as custom CSS for your theme. To add custom CSS, go to your My Blogs page and click the Customize link under the blog’s title. In the Customizer, open the CSS section and in the CSS editor there, you can enter the following CSS:

  .sidebar img {
  display: inline;
  }

  That will make it so all images in your sidebar (not just the ones in this widget) are displayed side by side instead of one on each line.

  Please let me know if you have any questions about that. :)

• 

  alillico · Member · Jul 16, 2014 at 5:00 pm

  • Copy link

  Thanks! Adding inline worked fine, I’d had it in the wrong place before.

• 

  rachelmcr · Member · Jul 16, 2014 at 5:01 pm

  • Copy link

  You’re welcome! I’m glad that worked for you. :)