i have 6 social media icons for a footer of an e-mail. Is it possible to make this responsive for phones so the social media icons go from 6 to 3 in one row?
I have tried to use both divs and tables with bootstrap but both are displaying incorrectly. I would prefer tables as they work with outlook e-mail.
Bootstrap code:
<td class="col-xs-4 col-sm-4 col-md-2">
You can put each set of 3 icons into separate columns which stack on xs.
<div class="col-xs-12 col-md-6>...Three icons go here....</div>
<div class="col-xs-12 col-md-6>...Three icons go here....</div>
Edit: Since this is for Outlook, Bootstrap will not play nicely with it. More info can be found here: Has anyone gotten HTML emails working with Twitter Bootstrap?
Would something like this work for you?
As an exmaple; this uses a media query, so that when the device width is below a certain size it resizes any 640px widths to 320px and then applies the "wrap" (wr) and "float" (fl) classes to wrap the columns beneath eachother.
If you take the HTML and stick it in Chrome of Firefox and resize the window you can see how it works.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>none</title>
<style type="text/css">
@media only screen and (max-width: 580px){
*[class].wr{ display:block !important; }
*[class].fl{ float:left !important; }
*[class].w320{ width:320px !important; }
</style>
</head>
<body style="padding:0px; margin:0PX;" bgcolor="#DEDEDE">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#DEDEDE" style="table-layout:fixed; margin:0 auto;">
<tr>
<td width="100%" align="center" valign="top" bgcolor="#DEDEDE">
<!--Table to wrap email-->
<!--Table with images in-->
<table width="640" border="0" cellpadding="0" cellspacing="0" class="w320">
<tr class="wr">
<!--Top row-->
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#ffcc00"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#ccff00"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#00ffcc"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
</tr>
</table>
</td>
<!--End top row-->
<!--Bottom row-->
<td class="fl wr">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#3377ff"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#ff3377"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#7733ff"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
</tr>
</table>
</td>
<!--End bottom row-->
</tr>
</table>
<!--End table with images in-->
<!--End of table to wrap email-->
</td>
</tr>
</table>
</body>
</html>
Note: This works across iPhone, Android 2.3 and 4.2. Problems occur in Android 4.4 kitkat but there is a workaround for it.
The way to do it so it works everywhere (outlook and all android included is with floated tables:
CSS:
@media only screen and (max-width: 480px) {
*[class*="drop"] { float:none!important; clear:both!important; width:100%!important; padding:0!important; display:block!important; }
}
HTML:
<table width="300" border="0" cellpadding="0" cellspacing="0" class="drop" align="left">
<tr>
<td align="left" valign="top"><!--image 1 goes in here--></td>
<td align="left" valign="top"><!--image 2 goes in here--></td>
<td align="left" valign="top"><!--image 3 goes in here--></td>
</tr>
</table>
<!--[if mso]></td>
<td align="left" valign="top" width="50%"><![endif]-->
<table width="300" border="0" cellpadding="0" cellspacing="0" class="drop" align="right">
<tr>
<td align="left" valign="top"><!--image 1 goes in here--></td>
<td align="left" valign="top"><!--image 2 goes in here--></td>
<td align="left" valign="top"><!--image 3 goes in here--></td>
</tr>
</table>
</td>
The table widths would need to be changed to suit your email width so they equal 50% of it.
You will notice the commented closing and opening td in the middle - this is an outlook condition, so for outlook only there will be a td wrapping each table.
If your tables don't need to be exactly 50% (as in there is padding between them) then you can leave out the outlook comment and just size your tables smaller than 50%, and make sure 1 is floted left and the other is floated right, leaving the gap between them that you need as padding. So long as this gap is more than about 10px, it should work in outlook.
Also be aware of your table structure when you use this outlook comment. If this is used in a table with more rows, you will get column span issues in outlook, as this row with have an extra column in outlook. Best to nest a fresh table inside a td before using this outlook fix.
Also note that the float is specified on the tables using the align attribute. This is to accommodate the older versions of outlook that don't recognize the css property float.
