Hello and welcome to our community! Is this your first visit?
Register
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
    Posts
    5
    Thanks
    1
    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:

    Code:
    <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.
    Attached Thumbnails Attached Thumbnails Spacing between icons when decreased-screens.jpg  

  • #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    360
    Thanks
    9
    Thanked 53 Times in 52 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?

    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-left1%;
    .
    socialicons span/* 2px fixed spacing, regardless of the device */
      
    paddingauto 1px;

    Last edited by hdewantara; 03-16-2013 at 03: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
    •