Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Thanked 0 Times in 0 Posts

    Spacing between icons when decreased

    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:

    .socialicons { padding-left:3px!important; }
    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="socialicons">
                            <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>

    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.
    Attached Thumbnails Attached Thumbnails -screens-jpg  

  2. #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Jakarta, Indonesia.
    Thanked 78 Times in 76 Posts
    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?

    PHP Code:
    <div class="socialicons">
    PHP Code:
    .socialicons img/* the elastic spacing */
    socialicons span/* 2px fixed spacing, regardless of the device */
    paddingauto 1px;

    Last edited by hdewantara; 03-16-2013 at 04:36 PM.


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts