Viewing 10 replies - 1 through 10 (of 10 total)
  • some of your code is being parsed here, to post code you must place it between backtics. on an american keyboard that’s the top left key under esc, same key as the ~

    Thread Starter stlastla

    (@stlastla)

    <a href="https://www.linkedin.com/e/fpf/17684837">
    <img src="https://www.relasjonerognettverk.no/wp-content/themes/convergence/images/linkedinbadge.gif" /> <align=left>
    
    <a href="https://www.facebook.com/pages/manage/?act=38004305#!/pages/Relasjoner-Og-Nettverk/108075015914530">
    <img src="https://www.relasjonerognettverk.no/wp-content/themes/convergence/images/Facebookbutton.gif" /><align=right>
    
    <a href="https://twitter.com/#!/Sturla_Lang">
    <img src="https://www.relasjonerognettverk.no/wp-content/themes/convergence/images/twitterbutton.png" />

    ok, a few problems before we can work on a solution. the align+left stuff doesn’t work. Also, you don’t close your anchors. (a links)

    <a href="https://www.linkedin.com/e/fpf/17684837">
    <img src="https://www.relasjonerognettverk.no/wp-content/themes/convergence/images/linkedinbadge.gif" />
    </a>
    <a href="https://www.facebook.com/pages/manage/?act=38004305#!/pages/Relasjoner-Og-Nettverk/108075015914530">
    <img src="https://www.relasjonerognettverk.no/wp-content/themes/convergence/images/Facebookbutton.gif" />
    </a>
    <a href="https://twitter.com/#!/Sturla_Lang">
    <img src="https://www.relasjonerognettverk.no/wp-content/themes/convergence/images/twitterbutton.png" />
    </a>

    Try that, and we’ll see what it looks like. After that we can work on aligning stuff

    Thread Starter stlastla

    (@stlastla)

    Thanks for helping out by the way! Thats really nice of you:)

    I have added your code, I cant see any visual difference. you can take a look link: https://www.relasjonerognettverk.no

    I didn’t really expect one… but I wanted your code to be valid before we tried to troubleshoot anything.
    now, we can float all the images left…your theme already has classes for that….so we can just add the classes to the img like this:

    <a href="https://www.linkedin.com/e/fpf/17684837">
    <img src="https://www.relasjonerognettverk.no/wp-content/themes/convergence/images/linkedinbadge.gif" class="fl" />
    </a>
    <a href="https://www.facebook.com/pages/manage/?act=38004305#!/pages/Relasjoner-Og-Nettverk/108075015914530">
    <img src="https://www.relasjonerognettverk.no/wp-content/themes/convergence/images/Facebookbutton.gif" class="fl" />
    </a>
    <a href="https://twitter.com/#!/Sturla_Lang">
    <img src="https://www.relasjonerognettverk.no/wp-content/themes/convergence/images/twitterbutton.png" class="fl" />
    </a>

    that should line them all up, except for one problem. If the width of all 3 images turns out to be wider that the alloted space in your sidebar, one of them will wrap down to the next line

    hmm… I see you tried my code, and it didn’t work as expected. Here’s what I see going on….. your three icons are 64, 128, and 120 px wide. Adds up to 212. Your column is supposed to be 305px. But that gets 30px of padding, followed by some more margins, and padding, etc.

    So I don’t believe those 3 pics will fit in side by side unless they are shrunk a bit. As for the one icon busting out of the box, that’s cause by an improperly cleared float. Which is in the way your theme is set up. As a temporary fix for now, you can either remove the classes we added, or add <div class="fix"></div> as the last line under everything else

    Thread Starter stlastla

    (@stlastla)

    Ok, I found some smaller icons so that they would fit. Now they are all 64×64 px
    It is still something wrong, but it might be the icons that I have added. The facebook and Linkedin Icon is ok now, it just the twitter icon that is not in place. I added you last code as well:)

    Thread Starter stlastla

    (@stlastla)

    The code looks like this now:

    <a href="https://www.linkedin.com/e/fpf/17684837">
    <img src="https://www.relasjonerognettverk.no/wp-content/themes/convergence/images/linkedin-button1.png" class="fl" />
    </a>
    <a href="https://www.facebook.com/pages/manage/?act=38004305#!/pages/Relasjoner-Og-Nettverk/108075015914530">
    <img src="https://www.relasjonerognettverk.no/wp-content/themes/convergence/images/facebook_button.gif" class="fl" />
    </a>
    <a href="https://twitter.com/#!/Sturla_Lang">
    <img src="https://www.relasjonerognettverk.no/wp-content/themes/convergence/images/twitterbutton.gif" class="fl" />
    </a>
    <div class="fix"></div>
    Thread Starter stlastla

    (@stlastla)

    I think it is the twitter icon, im going to try to change it.

    Thread Starter stlastla

    (@stlastla)

    changed to a new one which is 64X64 px and now its placed in the bottom for some reason. It′s also much smaller for some reason?

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘How to align social media icons on sidebar’ is closed to new replies.