html - How to right align images for responsive email with empty space to the left -


i'm aiming right align 4 social icons in header of email. mock , code below. main issue i've run there empty space left side of icons. empty td width pushes set of images outside of viewable area @ small screen sizes.

ideally icons right:0; or floated right. although know float avoided in email.

mock up: http://i.stack.imgur.com/9o1j1.png

the code below stacks social icons directly beneath logo on left side of table.

<table align="center" border="0" cellspacing="0" cellpadding="0" width="100%"> <tr>     <td>          <!-- header content -->         <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">             <tr>                 <td align="left" style="display:inline-block">                     <img src="logo.png" alt="logo" style="display:block; padding-top:32px; font:300 16px/24px arial, sans-serif; color:#000;" width="286"/>                 </td>             </tr>             <tr>                 <td style="display:inline-block; padding-top:4px;  padding-bottom:14px;">                     <a href="#" style="display:inline-block; text-decoration:none; padding-right:10px;"><img src="social-fb.png" alt="fb" width="18" /></a>                     <a href="#" style="display:inline-block; text-decoration:none; padding-right:10px;"><img src="social-blog.png" alt="blog" width="18" /></a>                     <a href="#" style="display:inline-block; text-decoration:none; padding-right:10px;"><img src="social-twitter.png" alt="twitter" width="18" /></a>                     <a href="#" style="display:inline-block; text-decoration:none;"><img src="social-linkedin.png" alt="linkedin" width="18" /></a>                 </td>               </tr>         </table>       </td> </tr>

you can align <td> contains social buttons right.

this supported in email clients including lot of mobile clients. ran code through email on acid , supported in major desktop clients except thunderbird , mobile clients except android , ios gmail app.

<table align="center" border="0" cellspacing="0" cellpadding="0" width="100%">   <tr>     <td><!-- header content -->        <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">         <tr>           <td align="left" style="display:inline-block"><img src="logo.png" alt="logo" style="display:block; padding-top:32px; font:300 16px/24px arial, sans-serif; color:#000;" width="286"/></td>         </tr>         <tr>           <td align="right" style="display:inline-block; padding-top:4px;  padding-bottom:14px;"><a href="#" style="display:inline-block; text-decoration:none; padding-right:10px;"><img src="social-fb.png" alt="fb" width="18" /></a> <a href="#" style="display:inline-block; text-decoration:none; padding-right:10px;"><img src="social-blog.png" alt="blog" width="18" /></a> <a href="#" style="display:inline-block; text-decoration:none; padding-right:10px;"><img src="social-twitter.png" alt="twitter" width="18" /></a> <a href="#" style="display:inline-block; text-decoration:none;"><img src="social-linkedin.png" alt="linkedin" width="18" /></a></td>         </tr>       </table></td>   </tr> </table>

Comments

Post a Comment

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

i working latest mpandroidchart library , looking way add annotations or images clickable. example: once data reaches value event occurs want able display user - there multiple events can occur annotations (not sure if right word) or image added @ point in chart. any pointers welcome. check documentation of yaxis . focus on setspacetop(...) , setaxismaxvalue(...) methods. for background: bar-shadow , disable calling: barchart.setdrawbarshadow(false) or change color: bardataset.setbarshadowcolor(int color)
Read more

javascript - Add class to another page attribute using URL id - Jquery -

i have attached id url. ex: when click link 1 , has #tab-2 id , takes me landing page. in landing page have find element has #tab-2 id have add class .active . i tried no luck. please 1 correct code. thanks js fiddle link html <div class="menu"> <ul> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-2">link 1</a></li> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-44">link 2</a></li> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-74">link 3</a></li> </ul> </div> landing page <div class="tab"> <ul> <li><a id="tab-2" class="active" >link 1 content</a></li> <li><a id="tab-44" >link 2 content</a></li> <li><a id="tab-74" >link 3 content</a></l...
Read more

firefox - Where is 'webgl.osmesalib' parameter? -

i'm trying webgl running on firefox (v37.0.2) via software acceleration mesa. tried following steps have been stated in article: http://www.binarytides.com/enable-webgl-firefox-ubuntu/ however, unable find parameter named ' webgl.osmesalib ' in about:config section? has been removed (or renamed)? if yes, how should instruct firefox use mesa's software acceleration webgl? looks support osmesa removed in favour llvmpipe.
Read more