My social media links are not centered

• 

  thenextgreatbite · Member · Feb 6, 2015 at 5:50 pm

  • Copy link
  • Add topic to favorites

  On my blog, my social media icons are aligned left. But when I try to center them it aligns them one on top of each other and not next to each other. I would like the complete set to be centered so no matter viewing it on a ipad or iphone or web they are centered under the widget subhead.

  Also, is there a way that I can have my social media links appear on the top of the browser on ipad or iphone? Either in the menu bar on top maybe?

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

• 

  jeremeylduvall · Member · Feb 6, 2015 at 8:04 pm

  • Copy link

  Hi!

  On my blog, my social media icons are aligned left. But when I try to center them it aligns them one on top of each other and not next to each other. I would like the complete set to be centered so no matter viewing it on a ipad or iphone or web they are centered under the widget subhead.

  Can you try inserting something like this under Appearance -> Customize -> CSS? That should move everything onto one line and center it:

  #text-4.widget_text .alignleft {
  margin: 1em 1px;
  }

  Also, is there a way that I can have my social media links appear on the top of the browser on ipad or iphone? Either in the menu bar on top maybe?

  There isn’t an easy way to do that with Sela (this theme does feature social media icons in the footer thought). Some themes, like Fortune, have this kind of setup built-in by default:

  https://theme.wordpress.com/themes/fortune/

  Would you be up for switching themes?

• 

  thenextgreatbite · Member · Feb 6, 2015 at 8:37 pm

  • Copy link

  That worked taking out the spacing between the icons which was driving me crazy, but I can still see that on ipad and phone it doesn’t center the set. I read somewhere something about using a <div> code might make it work as a set. Do you think it will?

  Hmmmmm…..I just switched to Sela and I am really getting into it. Thanks for the suggestion. ;)

• 

  jeremeylduvall · Member · Feb 6, 2015 at 9:33 pm

  • Copy link

  I don’t think we need to use any div tags. Can you give this CSS a try?

  .widget_text {
  	text-align: center;
  }
  
  #text-4.widget_text .aligncenter {
  	display: inline;
  	padding: 1px 1px;
  }

• 

  thenextgreatbite · Member · Feb 9, 2015 at 7:09 pm

  • Copy link

  It works for the desktop but not mobile platforms.

• 

  jeremeylduvall · Member · Feb 9, 2015 at 9:34 pm

  • Copy link

  Ah – I forgot to give you a crucial piece of direction. Can you go into your “Let’s Connect” widget and change all of the “alignleft” codes to “aligncenter”?

  For example, you’ll see this:

  <a href="https://twitter.com/nextgreatbite" target="_blank"><img class="alignleft wp-image-854 size-sela-testimonial-thumbnail" src="https://thenextgreatbite.files.wordpress.com/2015/01/twitter_blue1.png?w=48&h=48&crop=1" alt="twitter_blue" width="48" height="48" /></a>

  Change the class=”alignleft” text to class=”aligncenter”.