Padding in responsive email design

[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.

[Chrystyan]

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 {
float: right;
list-style-type: none;
}
#socialicons li {
float: left;
padding-left: 3px;
}
#socialicons li img {
border: 0;
width: 24px;
height: 23px;
}
</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-left: 3px; 


I also added anchor delimiters before your images in the appropriate locations so when you do go to add them you understand.

[Graycode]

It worked brilliantly, thank you

Originally Posted by Chrystyan

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 {
float: right;
list-style-type: none;
}
#socialicons li {
float: left;
padding-left: 3px;
}
#socialicons li img {
border: 0;
width: 24px;
height: 23px;
}
</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-left: 3px; 


I also added anchor delimiters before your images in the appropriate locations so when you do go to add them you understand.