0

I am trying to align all of the social media icons on one line, but for some reason they are wrapping. (twitter and fbconnect):

http://bit.ly/IqwM20

Any help on this would be greatly appreciated. I've tried a lot of stuff (floating left, increasing the containing div container's size, using display: inline-block ) but nothing seems to work.

Many thanks, gvanto

gvanto
  • 1,936
  • 3
  • 21
  • 26
  • whats the green bar on there for? – Dean_Wilson May 04 '12 at 00:45
  • green bar was just to view the container (I guess it should have given me a clue it was too small!). Btw does anyone know which fb count button just has a simple count next to it? I selected that I thought would do this on the fb dev like button page but it dont look right to me ... its an iframe version – gvanto May 04 '12 at 13:32
  • use http://www.floatingsocialmediabuttons.com/ – yuvraj May 10 '12 at 20:34

3 Answers3

1

Adjust the file pme.css as follows:

Line 140

#socmedia-bar {
clear: both;
float: right;
position: relative;
top: 30px;
height: 21px;
background-color: #6F6;
width: 345px;
}

Line 150

#socmedia-bar .region-socmed-icons {
float: left;
height: 20px;
margin: 0 0 0 5px;
position: relative;
}

Line 178 

#socmedia-bar .region.region-facebook-connect {
float: right;
height: 20px;
}
Clint
  • 471
  • 3
  • 12
  • Omg thank you so much you are my hero! I was on this for hours. Admittedly not a css expert :-D Thx again – gvanto May 04 '12 at 13:28
0

The problem seems to be lack of horizontal space so the twitter button wraps.

If you specify a width on #socmedia-bar .region-socmed-icons of say 250px they will all sit on the same line.

luke2012
  • 1,724
  • 1
  • 13
  • 20
0

If you are talking about the social media buttons on the top section, then you have the widths wrong. The social media buttons total width comes to 250px but the wrapper div is only 200px wide. Hence the wrapping. Increase the width of the wrapper #socmedia-bar and it will be fine.

sarcastyx
  • 2,219
  • 17
  • 16