Spacing between icons when decreased

[Graycode]

Hi all,

I can't seem to find a definitive answer to my query and especially as this is all a new field to me, finding it a little tricky but i'm almost there

I am basically trying to add a padding style to the social icons at the top of th email so that when the browser is resized, (essentially looked at on a smartphone) there is sufficient space between each icon.

When the screen is at full size it has equal spacing more so because the columns it sits in are loosely defined. It would be great to not have to cheat and use one image but rather the spacing kicks into effect as the screen decreases past breakpoints.

Code excerpt is below:

<style>
.socialicons { padding-left:3px!important; }

</style>

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="socialicons">
                      <tr>
                        <td width="51%">&nbsp;</td>
                        <td width="13%">&nbsp;</td>
                        <td width="8%"><img src="http://www.google.co.uk/emails/Template2013/images/FB.png" alt="Facebook icon" width="24" height="23" border="0" class="socialicons"/></td>
                        <td width="7%"><img src="http://www.google.co.uk/emails/Template2013/images/twit.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
                        <td width="7%"><img src="http://www.google.co.uk/emails/Template2013/images/youtube.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
                        <td width="8%"><img src="http://www.google.co.uk/emails/Template2013/images/flickr.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
                        <td width="6%"><img src="http://www.google.co.uk/emails/Template2013/images/gplus.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
                      </tr>
                  </table>

An image is attached which shows how the above code is currently functioning from full screen width to 'mobile' width. I am open to differing suggestions on how to solve this also! Please bear in mind that this is a responsive email so i wish to retain the padding between the icons even if the screen size decreases.

Thank you.

[hdewantara]

A CSS guy told me once to avoid the use of table, especially when it isn't going to be used to display rows of columns; I forget what it is though

Anyway, to your case. If you are trying to achieve 'elastic' spacing, yet pertaining to a minimum still, then maybe the following may suffice... no?

STRUCTURE:

PHP Code:

<div class="socialicons">
  <span></span><img/>
  <span></span><img/>
  <span></span><img/>
  <span></span><img/>
  <span></span><img/>
</div> 


CSS:

PHP Code:

.socialicons > img{ /* the elastic spacing */
  margin-left: 1%;
.socialicons > span{ /* 2px fixed spacing, regardless of the device */
  padding: auto 1px;
}