Social Media Buttons on responsive page

Difficulty lining up vertically on narrow screen

[Martin_Sach]

Hi all

I am stuck on a small but irritating problem after converting my home page to a responsive design. On a wide screen or tablet three social media buttons line up side by side (though the GPlus one is a bit higher for unexplained reasons but that's another story). When screen width narrows, the buttons end up on top of each other. Each one is in a separate DIV and I have tried using CSS to give the DIV a fixed height, to clear left, etc but I cannot seem to apply any style to these social media button containers. Here is the HTML:

<!-- start of social media table -->
<div class="leftcontent">
<div id="cell-fb"><div><IFRAME ID="fblike" SRC="http://www.facebook.com/plugins/like.php?href=http://www.canalmuseum.org.uk/index.html&amp;layout=button_count" SCROLLING="no" FRAMEBORDER="0" ALLOWTRANSPARENCY="true" STYLE="border:none; width:75px; height:80px"></IFRAME></div></div>
<div id="cell-tw"><div><a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=The%20London%20Canal%20Museum%20tells%20the%20story%20of%20London's%20Canals">Tweet</a></div></div>
<div id="cell-gp"><div><g:plusone size="standard"></g:plusone></div></div>
</div>
<!-- end of social media table -->

and the relevant bits of CSS are:

#cell-fb {
clear:left;
height: 28px;
}
#cell-tw {
clear:left;
height: 28px;
}
#cell-gp {
clear:left;
height: 28px;
}
Note that the class "leftcontent" only applies to wide screens.

Unfortunately my buttons appear on top of (overlapping) one another, whereas they should be above each other. I suspect there is a simple answer somewhere, can anyone point it out please?
Thanks, Martin

[NickMNS]

I looked at this real quick.

One thing that jumps out at me is that the fb-button has an inline style height=80px and the #cell-fb call height of 28px. The inline style overrides the #cell-fb style so that is likely causing an issue. But I am not sure if that is the cause of the problem you are describing. My guess is that it has something to do with the floating of elements (clear:left) but to diagnosis that, one would need to see the css for the elements that surround the buttons.

[Martin_Sach]

Thanks for replying. The inline style you spotted was just an experiment to see if it made any difference - it didn't. I have now removed the inline style height and width. I've also tried styling these DIVs in other ways e.g. giving them a pink background, which I often do so that I can see the result of what I am doing to an element, but this didnt work either, it is as if something is cancelling out all styles that I try to apply.

[keyplyr]

it is as if something is cancelling out all styles that I try to apply

That's highly probable since it's *cascading* style sheets.

[ipco]

Try display: table;
I haven't used it with social media buttons but it should work ok.

container {
 margin: 0 auto; 
 width: 100%;
}
.column {
 margin-top: 5%;    
 padding: 0 2%;    
 width: 100%;     
 display: inline-block;  
 }

@media only screen and (min-width: 30em) {
 .container {
  display: table; 
  border-collapse: separate; 
  table-layout: fixed;
  border-spacing: 0.7em;
  }


<section class="container"> 

  <div class="column"> 
  <p>
  <img src="image-1.png" alt="" /> 
  </p>
  </div> 
   <div class="column"> 
  <p>
  <img src="image-2.png" alt="" /> 
  </p>
  </div> 
  <div class="column"> 
  <p>
  <img src="image-3.png" alt="" /> 
  </p>
  </div>