How to change social media icons to horizontal position

  • Unknown's avatar
    thehealthgrind · Member ·

    I’ve been trying various html and css methods and I’m still unable to get my social media icons to line up horizontally instead of vertically.

    They are:
    img 1
    img 2
    img 3

    I want:
    img 1 img 2 img 3

    I have the watson theme and the customization package.

    Thanks in advance!

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

  • Unknown's avatar
    sandymcfadden · Member ·

    Hi thehealthgrind,

    You could try something like this, I think it will get you close to what you’re looking for.

    #text-9 div, #text-11 div {
  display: table;
  width: 100%;
}
#text-9 div a, #text-11 div a {
  display: table-cell;
}

    Let me know how that works out.

  • Unknown's avatar
    thehealthgrind · Member ·

    Hi Sandy,

    Thanks for that. But it has spread them out as wide as the width of the column. I reduced the width to 60% so that they sit together nicely. But my icons at the bottom of the page have shrunk!

    Also why do I have a line underneath them?

    Thanks.

  • Unknown's avatar
    sandymcfadden · Member ·

    Hi thehealthgrind,

    I’ve adjusted the code a bit so that you can control the width of the ones in the side and the ones in the footer separately and also included the code that should remove the line underneath as well.

    #text-9 div, #text-11 div {
  display: table;
}
#text-9 div {
    width: 60%;
}
#text-11 div {
  width: 100%;
}
#text-9 div a, #text-11 div a {
  display: table-cell;
 border-bottom: 0 !important;
}

    Let me know if that does it for you.

  • Unknown's avatar
    thehealthgrind · Member ·

    Amazing thank you!

  • Unknown's avatar
    sandymcfadden · Member ·

    No problem at all, glad it worked.

  • The topic ‘How to change social media icons to horizontal position’ is closed to new replies.