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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Padding in responsive email design

    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 Padding in responsive email design-screens.jpg  

  • #2
    New Coder
    Join Date
    Mar 2013
    Location
    Indiana
    Posts
    26
    Thanks
    0
    Thanked 7 Times in 7 Posts
    My suggestion is not to use a table. It's a bit extensive and intensive for what you're trying to accomplish. Try this instead:

    PHP Code:
    // You want to ensure that all of your styles are handled in styles, not elsewhere. You'll reduce errors and conform to standards.

    <style type="text/css">
    #socialicons {
    floatright;
    list-
    style-typenone;
    }
    #socialicons li {
    floatleft;
    padding-left3px;
    }
    #socialicons li img {
    border0;
    width24px;
    height23px;
    }
    </
    style>

    // Instead of using a table, we're using an unordered list. In the CSS, the list-style-type property prevents any indicators such as dots.

    <ul id="socialicons">

    // li indicates a List Item. You'll create a new one for each different icon. I've filled out the ones you've provided and completed them. All the styles are handled above, you can see how this is cleaner.

     
    <li><a href=""><img src="http://www.google.co.uk/emails/Template2013/images/FB.png" alt="Facebook Icon" /></a></li>
     <
    li><a href=""><img src="http://www.google.co.uk/emails/Template2013/images/twit.png" alt="Twitter Icon" /></a></li>
     <
    li><a href=""><img src="http://www.google.co.uk/emails/Template2013/images/youtube.png" alt="Youtube Icon" /></a></li>
     <
    li><a href=""><img src="http://www.google.co.uk/emails/Template2013/images/flickr.png" alt="Flickr Icon" /></a></li>
     <
    li><a href=""><img src="http://www.google.co.uk/emails/Template2013/images/gplus.png" alt="Google+ Icon" /></a></li>
    </
    ul>

    // Since we used a float in our previous section, we don't want to mess with other elements. By using clear:both, we clear ourselves from the float.

    <div style="clear:both;"></div
    Hope this helps, give it a try! If you need to adjust the spacing, do so on this line:

    PHP Code:
    padding-left3px
    I also added anchor delimiters before your images in the appropriate locations so when you do go to add them you understand.
    Last edited by Chrystyan; 03-15-2013 at 09:57 PM. Reason: had an error... oops :P

  • Users who have thanked Chrystyan for this post:

    Graycode (03-18-2013)

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thank you Chrystyan

    It worked brilliantly, thank you

    Quote Originally Posted by Chrystyan View Post
    My suggestion is not to use a table. It's a bit extensive and intensive for what you're trying to accomplish. Try this instead:

    PHP Code:
    // You want to ensure that all of your styles are handled in styles, not elsewhere. You'll reduce errors and conform to standards.

    <style type="text/css">
    #socialicons {
    floatright;
    list-
    style-typenone;
    }
    #socialicons li {
    floatleft;
    padding-left3px;
    }
    #socialicons li img {
    border0;
    width24px;
    height23px;
    }
    </
    style>

    // Instead of using a table, we're using an unordered list. In the CSS, the list-style-type property prevents any indicators such as dots.

    <ul id="socialicons">

    // li indicates a List Item. You'll create a new one for each different icon. I've filled out the ones you've provided and completed them. All the styles are handled above, you can see how this is cleaner.

     
    <li><a href=""><img src="http://www.google.co.uk/emails/Template2013/images/FB.png" alt="Facebook Icon" /></a></li>
     <
    li><a href=""><img src="http://www.google.co.uk/emails/Template2013/images/twit.png" alt="Twitter Icon" /></a></li>
     <
    li><a href=""><img src="http://www.google.co.uk/emails/Template2013/images/youtube.png" alt="Youtube Icon" /></a></li>
     <
    li><a href=""><img src="http://www.google.co.uk/emails/Template2013/images/flickr.png" alt="Flickr Icon" /></a></li>
     <
    li><a href=""><img src="http://www.google.co.uk/emails/Template2013/images/gplus.png" alt="Google+ Icon" /></a></li>
    </
    ul>

    // Since we used a float in our previous section, we don't want to mess with other elements. By using clear:both, we clear ourselves from the float.

    <div style="clear:both;"></div
    Hope this helps, give it a try! If you need to adjust the spacing, do so on this line:

    PHP Code:
    padding-left3px
    I also added anchor delimiters before your images in the appropriate locations so when you do go to add them you understand.


  •  

    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
    •