Align three images in footer side by side

• 

  yddesignnetwork · Member · Nov 18, 2014 at 11:42 am

  • Copy link
  • Add topic to favorites

  I’m trying to align three hyperlinked icons side by side similar to what is shown on this website at the bottom: http://www.junocreative.net.au/
  I’m creating a similar Facebook, Instagram etc. kind of link set in the footer of my page. I have the theme Port and am using it’s footer – text widget to create the links.

  I am able to create the icons as links but they do not align side by side.

  I would really appreciate some help. Thanks in advance.

• 

  designsimply · Member · Nov 18, 2014 at 12:49 pm

  • Copy link

  It sounds like you used block level elements in your text widget but you want them to be inline so they display side-by-side instead of stacked.

  There are a couple different ways to try to solve the problem. One would be to adjust the HTML to use inline elements all on one line. For example, just links without any divs. Another way could be to target the elements in the text widget with CSS and use “display: inline” on them. Either way should work. If you feel comfortable doing it, try editing the HTML so the elements are all inline elements on one line. A “div” is a block-level element and an “a” tag is inline.

  If you’re still having trouble after that, please reply back with a link to where we can see the problem in action or a copy of the HTML that you are using in your text widget.

• 

  yddesignnetwork · Member · Nov 19, 2014 at 9:15 am

  • Copy link

  Hi! Thank you for your help. I don’t think i’m using any “div” elements… But i’m pretty new at this. This is what I have at the moment.

  <a href="http://www.facebook.com/" class="icons-footer"><img src="http://www.nasa.gov/sites/default/files/jason.c.townsend/images/facebook-icon.png" height="40" width="40"></a>
      <a href="https://twitter.com" class="icons-footer"><img src="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300"  height="40" width="40"></a>
  <a href="https://twitter.com" class="icons-footer"><img src="https://cdn1.iconfinder.com/data/icons/black-socicons/512/fiverr-512.png" height="40" width="40"></a>

• 

  designsimply · Member · Nov 19, 2014 at 7:33 pm

  • Copy link

  Can you try taking out any line returns so that there are only spaces between each “>” and “<” ?

• 

  yddesignnetwork · Member · Nov 20, 2014 at 6:33 am

  • Copy link

  I just tried that and it’s still not working :(

  <a href="http://www.facebook.com/" class="icons-footer"><img src="http://www.nasa.gov/sites/default/files/jason.c.townsend/images/facebook-icon.png" height="40" width="40"></a> <a href="https://twitter.com" class="icons-footer"><img src="https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300" height="40" width="40"></a> <a href="https://twitter.com" class="icons-footer"><img src="https://cdn1.iconfinder.com/data/icons/black-socicons/512/fiverr-512.png" height="40" width="40"></a>

• 

  designsimply · Member · Nov 20, 2014 at 8:13 pm

  • Copy link

  The code snippet looks okay to me. It’s possible there are other elements on the page or other custom CSS that is affecting it for you, but I can’t really tell without seeing an example. Can you link to a page where I can see the problem happening?

• 

  yddesignnetwork · Member · Nov 21, 2014 at 12:13 am

  • Copy link

  Sure! :) It’s a bit of a work in progress but it’s shown here at the bottom: http://yddesignnetwork.com/

  Thank you so much for your time!

• 

  thesacredpath · Member · Nov 21, 2014 at 4:23 am

  • Copy link

  Hi there, first off, remove this from your CSS

  .footer-box {
      float: right;
      margin: 0 202px 10px 0 !important;
  }

  and replace it with this:

  .footer-box img {
      display: inline;
  }
  .footer-box {
      width: 100%;
      float: none !important;
  }
  #text-8 {
      text-align: center;
  }

  The images have a display: block; declaration on them which makes them stack. The above CSS changes that to display: inline; which makes them display in a row. I’ve also centered things using different declarations than you had, which will make the widget display properly on tablets and phones as well as on desktop monitors.

• 

  yddesignnetwork · Member · Nov 22, 2014 at 5:04 am

  • Copy link

  Thank you so very much! Incredibly grateful for your help :)

• 

  thesacredpath · Member · Nov 22, 2014 at 8:21 pm

  • Copy link

  You are welcome.