Setting icon to side by side

• 

  charminginter · Member · Oct 16, 2017 at 10:41 pm

  • Copy link
  • Add topic to favorites

  Hi,
  I did put css code at Customize > footer
  The default css code show correctly result but I prefer to put colored icons.
  So I modified the code by add icon’s url.

  But all the icons settle into next line.
  How can I put all at the same line, side by side with little space between each icon?
  I would ask you to modify at my full code otherwise I have no idea how to use them.

  Please help.
  Thank you.

  Here was my full code :

  <a> <img src = "PIC URL"/> </a>
  
  <a href="TWEETER"> <img src = "PIC URL"/> </a>
  
  <a href="INSTAGRAM"> <img src = "PIC URL"/> </a>
  
  <a href="YOUTUBE"> <img src = "PIC URL"/> </a>
  
  <a href="LINE"> <img src = "PIC URL"/> </a>

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

• 

  jessestu · Member · Oct 17, 2017 at 3:09 am

  • Copy link

  Hi @charminginter,

  Things lining up vertically when I want them horizontally has annoyed me in the past. Use this CSS to get your images lined up. Feel free to edit the code however you want. And, please let me know if it’s not working or you need anything else.

  .inside > .right > p a {
    display: inline;
    float: right;
    padding-left: 5px;
  }

• 

  jessestu · Member · Oct 17, 2017 at 3:15 am

  • Copy link

  Actually, here’s a better code that accounts for the theme’s responsive design. Replace the code above so that it centers on a small screen.

  .inside > .right > p a {
    display: inline-block;
    margin: 0 auto;
    padding-left: 5px;
  }
  
  @media screen and (min-width: 700px) {
    .inside > .right > p a {
      display: inline;
      float: right;
      padding-left: 5px;
    }
  }

• 

  jessestu · Member · Oct 17, 2017 at 4:14 am

  • Copy link

  I don’t know of a way to edit my forum posts. I wish I did. I realized, after getting up and doing the dishes, that I created redundancy in this CSS. It’s not real important, but the detail-oriented side of me won’t let me touch another dish until this is corrected:

  .inside > .right > p a {
    display: inline-block;
    margin: 0 auto;
    padding-left: 5px;
  }
  
  @media screen and (min-width: 700px) {
    .inside > .right > p a {
      float: right;
    }
  }

  If you want more or less space between the icons, adjust the “5px” number after “padding-left”.

  May you blog happily!
  Jesse

• 

  thesacredpath · Member · Oct 17, 2017 at 4:15 am

  • Copy link

  You can also try the following custom CSS.

  #footer .secondary .right {
    max-width: 300px;
    width: 100%;
  }
  #footer .secondary .right p img {
    display: inline-block;
  }

• 

  charminginter · Member · Oct 17, 2017 at 10:53 pm

  • Copy link

  It works !!!
  Thank you guys :D

• 

  jessestu · Member · Oct 17, 2017 at 11:54 pm

  • Copy link

  Excellent! Thanks for checking back in.

• 

  thesacredpath · Member · Oct 18, 2017 at 12:10 am

  • Copy link

  Awesome, and you are welcome!