Reordering social media icons

• 

  pssethi · Member · Aug 4, 2015 at 8:14 pm

  • Copy link
  • Add topic to favorites

  Hello,

  Right now, my social media icons are in this (alphabetical) order: Facebook, Instagram, Twitter, YouTube.

  I would like them to be in this order: Twitter, Instagram, Facebook, YouTube. However, I’m not sure what code to add to the CSS to make this change. Can anyone help me?

  Thank you!

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

• 

  wweadam · Member · Aug 5, 2015 at 1:04 am

  • Copy link

  Hey there!

  This is a tricky task! The best way I could figure out how to do this is through margins. Try adding this to your CSS.

  .twitter {
      margin-left: -60px;
  }
  
  .instagram {
      margin-left: -50px;
  }
  
  .facebook {
      margin-left: 50px;
      margin-right: -5px;
  }
  
  .youtube {
      margin-left: 53px;
  }

  Of course you can play around with the numbers to change the spacing, or if you need any help just let me know.

  Hope this works out!

• 

  pssethi · Member · Aug 5, 2015 at 9:25 pm

  • Copy link

  Thank you very much! I haven’t been able to make it work yet, but I think I’m getting there. I appreciate your help.

• 

  thesacredpath · Member · Aug 6, 2015 at 1:17 am

  • Copy link

  I would probably suggest against trying to reorder them using negative margins. The reason I would not do that is that on a responsive designed theme such as Studio, the design changes and it may well have unwelcome results. Make sure and narrow and widen your browser window and view it on several different devices, such as phones, small tablets and larger tablets.