I am using the Laravel Dompdf for converting my view to pdf . Everything is works properly before I add the image to the view . After retrieving an image its shows an error of:
Maximum execution time of 60 seconds exceeded
Here is my code
public function GeneratePDF($code)
{
# Retrieve Record for the select Beneficiaries
$beneficiary = Beneficiary::where('code', $code)->firstOrFail();
$mytime = Carbon::now();
$beneficiaryimage = $beneficiary->profile_photo;
$orgimage = $beneficiary->charitableOrganization->profile_photo;
// $familymember = BeneficiaryFamilyInfo::where('beneficiary_id',$beneficiary->id)->get();
if($beneficiary->charitable_organization_id == Auth::user()->charitable_organization_id)
{
// return view('charity.main.beneficiaries.BackupPdf', compact('beneficiary','mytime'));
$pdf = PDF::loadView('charity.main.beneficiaries.BackupPdf', compact('beneficiary','mytime','beneficiaryimage','orgimage'));
return $pdf->download($beneficiary->charitableOrganization->name.'-'.$beneficiary->last_name . ', ' . $beneficiary->first_name . '.pdf');
}
else
{
$toastr = array(
'message' => 'Users can only access their own charity records.',
'alert-type' => 'error'
);
return redirect()->back()->with($toastr);
}
}
My view Page
<!DOCTYPE html>
<html>
<head>
<title>Backup Beneficiary Data as PDF</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<style>
.tableinformation {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
margin-left: auto;
margin-right: auto;
border-style: none;
}
.tableinformation td
{
border:none;
outline:none;
}
.tableinformation :nth-child(odd) {
width: 40%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.organization {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
margin-left: auto;
margin-right: auto;
margin-top: 50px ;
margin-bottom: 50px;
}
.organization td
{
border:none;
outline:none;
}
.family
{
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
margin-left: auto;
margin-right: auto;
margin-top: 50px ;
margin-bottom: 50px;
}
.family th
{
text-align: center;
}
.family td
{
text-align: center;
}
.tableinformation2 {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
margin-left: auto;
margin-right: auto;
}
.tableinformation2 td ,th
{
border:none;
outline:none;
}
.prepareandnoted
{
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
margin-left: auto;
margin-right: auto;
margin-top: 50px ;
margin-bottom: 50px;
}
.prepareandnoted td
{
text-align: center ;
border:none;
outline:none;
}
.page-break {
page-break-after: always;
}
</style>
<body>
<table class="organization" >
<tr>
<td style="width:30%"><img src="{{ ($beneficiary->charitableOrganization->profile_photo)?url('upload/charitable_org/profile_photo/'.$beneficiary->charitableOrganization->profile_photo):url('upload/charitable_org/profile_photo/no_avatar.png') }}" alt="Charity Organization Profile Photo" width="100px" height="100px"></td>
<td style="text-align: center; font-size: 150%;">{{$beneficiary->charitableOrganization->name}}</td>
</tr>
</table>
<table class="organization">
<tr>
<td > Date: <span style="text-decoration:underline;">{{$mytime->isoFormat('MMMM d, YYYY')}}</span>
<br>
<span>Time: </span><span style="text-decoration:underline;">{{$mytime->format('g:i A');}}</span>
</td>
<td style="width:30%"><img src=" {{ ($beneficiary->profile_photo)?url('upload/charitable_org/beneficiary_photos/'. $beneficiary->profile_photo):url('upload/avatar_img/no_avatar.png') }}" alt="beneficiaries photo" width="150px" height="150px"></td>
</tr>
</table>
<table class="tableinformation">
<tr>
<th colspan="2">I. Identifying Information</th>
</tr>
<tr>
<td>Full name</td>
<td>{{$beneficiary->last_name. ', '.$beneficiary->first_name.' '. $beneficiary->middle_name}}</td>
</tr>
<tr>
<td>Nickname :</td>
<td>{{$beneficiary->nick_name}}</td>
</tr>
<tr>
<td>Date of Birth :</td>
<td>{{Carbon\Carbon::parse($beneficiary->brith_date)->isoFormat('MMMM d, YYYY')}}</td>
</tr>
<tr>
<td>Age During interview :</td>
<td>{{ Carbon\Carbon::parse($beneficiary->birth_date)->diff(Carbon\Carbon::parse($beneficiary->interviewed_at))->y }}
</td>
</tr>
<tr>
<td>Place of Birth :</td>
<td>{{$beneficiary->birth_place}}</td>
</tr>
<tr>
<td>Religion :</td>
<td>{{$beneficiary->religion}}</td>
</tr>
<tr>
<td>Present Address :</td>
<td>{{$beneficiary->presentAddress->region. ' '.$beneficiary->presentAddress->province
.' '.$beneficiary->presentAddress->city.' '.$beneficiary->presentAddress->barangay
.' '.$beneficiary->presentAddress->postal_code}}
</td>
</tr>
<tr>
<td>Permanent Address :</td>
<td>{{$beneficiary->permanentAddress->region. ' '.$beneficiary->permanentAddress->province
.' '.$beneficiary->permanentAddress->city.' '.$beneficiary->permanentAddress->barangay
.' '.$beneficiary->permanentAddress->postal_code}}
</td>
</tr>
<tr>
<td>Provincal Address :</td>
<td>{{$beneficiary->provincialAddress->region. ' '.$beneficiary->provincialAddress->province
.' '.$beneficiary->provincialAddress->city.' '.$beneficiary->provincialAddress->barangay
.' '.$beneficiary->provincialAddress->postal_code}}
</td>
</tr>
<tr>
<td>Educational Attainment :</td>
<td>{{$beneficiary->educational_attainment}}</td>
</tr>
<tr>
<td>Last School Attended :</td>
<td>{{$beneficiary->last_school_year_attended}}</td>
</tr>
<tr>
<td>Contact No. :</td>
<td>{{$beneficiary->contact_no}}</td>
</tr>
</table>
<table class="family">
<tr>
<th colspan="8" style="text-align: left;" >II. Family Composition</th>
</tr>
<tr>
<td>Name</td>
<td>Age</td>
<td>Relationship</td>
<td>Civil Status</td>
<td>Education</td>
<td>Occupation</td>
<td>Income</td>
<td>WhereAbout</td>
</tr>
#foreach ($beneficiary->families as $item)
<tr>
<td style="width: 20%">{{$item->last_name.', '.$item->first_name}}</td>
<td>{{Carbon\Carbon::parse($item->birth_date)->age;}}</td>
<td>{{$item->relationship}}</td>
<td>{{$item->civil_status}}</td>
<td>{{$item->education}}</td>
<td>{{$item->occupation}}</td>
<td>{{$item->income}}</td>
<td> {{ ($item->where_abouts)? $item->where_abouts:'---' }}</td>
</tr>
#endforeach
</table>
<table class="tableinformation2">
<tr>
<th >III. Presented Problem </th>
</tr>
<tr>
<td style=" padding-left: 10%;">
{{$beneficiary->bg_info->problem_presented}}
</td>
</tr>
<tr>
<th>IV. Background Information</th>
</tr>
<tr>
<th style=" padding-left: 8%;">
A. The Client
</th>
</tr>
<tr>
<td style=" padding-left: 10%;">
{{$beneficiary->bg_info->about_client}}
</td>
</tr style="margin-bottom:10px;">
<tr>
<th style=" padding-left: 8%;">
B. The Family
</th>
</tr>
<tr>
<td style=" padding-left: 10%;">
{{$beneficiary->bg_info->about_family}}
</td>
</tr>
<tr>
<th style=" padding-left: 8%;">
C. The Environment
</th>
</tr>
<tr>
<td style=" padding-left: 10%;">
{{$beneficiary->bg_info->about_community}}
</td>
</tr>
<tr>
<th>V. Assessment And Recommendation</th>
</tr>
<tr>
<td>
{{$beneficiary->bg_info->assessment}}
</td>
</tr>
</table>
<table class="prepareandnoted">
<tr >
<td>Prepared By</td>
<td>Noted By</td>
</tr>
<tr>
<td style="text-decoration: underline;">{{$beneficiary->prepared_by}}</td>
<td style="text-decoration: underline;">{{$beneficiary->noted_by}}</td>
</tr>
</table>
</body>
</html>
Ideally , I want to export the file within 5 seconds , is there a way to improve the speed? This is my first time to use something like this to convert pdf . Any answer are appreciated . Thankyou.
I am using barryvdh/laravel-dompdf version 0.8.4 in Laravel 5 to create a PDF from a view. Before i do composer update, the pdf working just fine, but now its showing up like this
It was supposed to be like this
This is the view for the black part
<table class="header" style="table-layout:fixed;width:100%;background-color:none;border-collapse: collapse;">
<thead>
<tr width="100%"><th>
<div style="font-weight:200;font-size:16px;margin-top:10px;text-align: center;">
<br>
<b>COACHING REPORT</b><br>
<b>SEMESTER
#if(date('m', strtotime($detail->date)) > 6) 1 #else 2 #endif
- TAHUN PELAJARAN {{$detail->year->name}}</b>
</div>
<div style="width: 100%;font-size:11px!important;margin-top:10px">
<table style="width: 100%;text-align:left;">
<tr style="background: none;">
<td style="width: 15%;">Nama Coach</td>
<td>:</td>
<td style="width: 85%;">{{$detail->user->name}}</td>
</tr>
<tr style="background: none;">
<td>Nama Coachee</td>
<td>:</td>
<td>{{$detail->student->name}}</td>
</tr>
<tr style="background: none">
<td>Kelas</td>
<td>:</td>
<td>{{$student->grade->name}} {{$student->grade_detail->name}}</td>
</tr>
<tr style="background: none;">
<td>Periode</td>
<td>:</td>
<td>{{bulan_indo(explode("-",$startdate)[1])}} - {{bulan_indo(explode("-",$enddate)[1])}} {{date('Y',strtotime($enddate))}}</td>
</tr>
</table>
</div>
</th></tr>
</thead>
</table>
This is the view for the bottom part that works just fine
<table class="tableBorder" width="100%"
style="margin-top: 10px; clear: both; top: 80px;border-collapse: collapse;">
<thead>
<tr class="tableBorder">
<th
style="font-size: 11px; margin: 5px !important; font-weight: 120;width:7%;">
<b>AREA / RANAH PERKEMBANGAN</b></th>
<th
style="font-size: 11px; margin: 5px !important; font-weight: 120;width:10%;">
<b>DESKRIPSI</b></th>
</tr>
</thead>
<tbody class="bordered" style="">
<tr class="tableBorder">
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
Perkembangan akademik</td>
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
{!! $isi[0] !!}
</td>
</tr>
<tr class="tableBorder">
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
Perkembangan sikap sosial</td>
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
{!! $isi[1] !!}
</td>
</tr>
<tr class="tableBorder">
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
Perkembangan karakter</td>
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
{!! $isi[2] !!}
</td>
</tr>
<tr class="tableBorder">
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
Perkembangan ketrampilan/minat/bakat/talenta</td>
<td
style="font-size: 11px; margin: 5px !important; font-weight: 60;">
{!! $isi[3] !!}
</td>
</tr>
</tbody>
</table>
I try to comment the table,thead,tr,and th part, and leaving just the div and its finally showing up, but I have a lot of view that use this, so i was wondering if i can just fix this from the dompdf part without changing the view.
This question already has answers here:
Equal sized table cells to fill the entire width of the containing table
(4 answers)
Closed 5 years ago.
I'm trying to control the images inside the table and keep them on the same level and same width when screen size down. This will be used for email, so I would avoid global styles like td width so other elements in the email wont be effected.
The code I am using is:
#media only screen and (max-width:414px) {
.mobile {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
}
<table border="" align="center" cellpadding="0" cellspacing="0" class="mobile" width="600">
<tr>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> First title here </h4>
<img src="http://via.placeholder.com/200x160/000" style="width: 100%;" />
</td>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> SECOND TITLE HERE IN THE MIDDLE</h4>
<img src="http://via.placeholder.com/200x160/00c" style="width: 100%;" />
</td>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px ">THEN THIRD TITLE HERE</h4>
<img src="http://via.placeholder.com/200x160/c00" style="width: 100%;" />
</td>
</tr>
</table>
Just apply width: 33.33%; to the table cells.
And if you want the images be aligned to the bottom, add vertical-align: bottom; to the cells and apply display: block to the images:
td {
width: 33.33%;
vertical-align: bottom;
}
td img {
display: block;
}
#media only screen and (max-width:414px) {
.mobile {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
}
<table border="" align="center" cellpadding="0" cellspacing="0" class="mobile" width="600">
<tr>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> First title here </h4>
<img src="http://via.placeholder.com/200x160/000" style="width: 100%;" />
</td>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> SECOND TITLE HERE IN THE MIDDLE</h4>
<img src="http://via.placeholder.com/200x160/00c" style="width: 100%;" />
</td>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px ">THEN THIRD TITLE HERE</h4>
<img src="http://via.placeholder.com/200x160/c00" style="width: 100%;" />
</td>
</tr>
</table>
The part that was breaking the layout was the text above the images. Try moving it above the images on its seperate row, give it a height and everything works.
#media only screen and (max-width:414px) {
.mobile {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
}
<table border="" align="center" cellpadding="0" cellspacing="0" class="mobile" width="600">
<tr>
<td style="text-align: center; height: 20px;" height="20"><h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> First title here </h4></td>
<td style="text-align: center; height: 20px;" height="20"><h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> SECOND TITLE HERE IN THE MIDDLE</h4></td>
<td style="text-align: center; height: 20px;" height="20"><h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px ">THEN THIRD TITLE HERE</h4></td>
</tr>
<tr>
<td width="33%" style="text-align: center;">
<img src="http://via.placeholder.com/200x160/000" style="width: 100%;" />
</td>
<td width="33%" style="text-align: center;">
<img src="http://via.placeholder.com/200x160/00c" style="width: 100%;" />
</td>
<td width="33%" style="text-align: center;">
<img src="http://via.placeholder.com/200x160/c00" style="width: 100%;" />
</td>
</tr>
</table>
Let me know if this works for you.
I have a web version that's displaying fine. When I send a test email, it shows unwanted spacing between the images. I tried changing the the padding and margin , but nothing's working. Why is it doing that?
https://jsfiddle.net/tantalizea/r49oqbjj/
CSS:
a,
body,
div,
img,
span,
table,
td,
tr {
margin: 0;
padding: 0;
border: 0;
}
a {
color: #231F20;
font-weight: bold;
text-decoration: none
}
a[href^="x-apple-data-detectors:"] {
color: inherit;
text-decoration: inherit;
}
area {
outline: none
}
body {
font: normal 100% Arial, Helvetica, sans-serif;
background: #FFF;
color: #231F20
}
img {
border: none;
width: 100%;
height: auto
}
.container {
width: 600px;
margin: 0 auto;
max-width: 600px
}
#preheader {
display: none !important;
visibility: hidden;
opacity: 0;
color: #FFFFFF;
color: transparent;
height: 0;
width: 0;
font-size: 0px
}
.desktop {
display: table !important;
margin: 0 auto !important;
}
tr.desktop {
display: table-row !important
}
td.desktop {
display: table-cell !important
}
img.desktop {
display: inline !important
}
.mobile {
display: none !important
}
.break {
display: inline !important
}
#media screen and (max-width: 600px) {
.container {
width: 97.5%
}
.desktop,
tr.desktop,
td.desktop,
img.desktop {
display: none !important
}
.mobile {
display: table !important
}
tr.mobile {
display: table-row !important
}
td.mobile2 {
display: table !important;
width: 100%;
text-align: center !important
}
td.mobile {
display: table-cell !important
}
.break {
display: none !important
}
.hidden {
display: none !important
}
.no-border {
border: none !important
}
.smaller {
font-size: 200% !important
}
.smaller2 {
font-size: 100% !important
}
.center {
text-align: center !important
}
.margin {
margin: 0 auto
}
.image {
width: 100px !important
}
.width-100 {
width: 100% !important
}
}
HTML:
<body style="background:#FFF; color:#858585">
<div id="preheader" style="display:none; visibility:hidden; opacity:0; color:#878787; color:transparent; height:0; width:0; font-size:0px;">Tuesday, March 7, 2017 | 9840 International Drive, Orlando, Florida | Booth #613</div>
<!-- /div#preheader -->
<div class="container" style="margin:0 auto; max-width:600px">
<table cellpadding="0" cellspacing="0" border="0" align="center" class="container" style="margin:0 auto; max-width:600px">
<tr class="bronto">
<td height="20"></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font:normal 68.75% Helvetica, Arial, sans-serif; color:#858585">Is this email not displaying correctly? Try the web version.</span></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td height="20"></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td width="35" class="desktop"> </td>
<td align="center">
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td align="left" valign="bottom" width="76%"><span style="font:normal 300% Times, 'Times New Roman', serif; color:#56565a; line-height:100%" class="smaller"><strong><em>You're Invited!</em></strong></span></td>
<td style="text-align:right" width="24%"><img src="http://www.kravetcontract.com/email_blasts/tipin.png" alt="KK" style="max-width:144px; width:100%" /></td>
</tr>
</table>
</td>
<td width="35" class="desktop"> </td>
</tr>
<!--<tr class="mobile">
<td class="mobile">
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%" class="mobile">
<tr class="mobile">
<td height="20" class="mobile"></td>
</tr>
<tr class="mobile">
<td align="center" class="mobile"><span style="font:normal 200% Times, 'Times New Roman', serif; color:#57565b;" class="mobile"><strong><em>You're Invited!</em></strong></span></td>
</tr>
</table>
</td>
</tr>-->
</table>
</td>
</tr>
<tr>
<td height="20"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/top.jpg" alt="Top" style="max-width:600px" /></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td align="left" valign="middle" class="desktop" width="78"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/left.jpg" alt="Left" style="max-width:78px" /></td>
<td align="center" valign="middle" bgcolor="#FFFFFF">
<table cellpadding="0" cellspacing="20" align="center" border="0" width="100%">
<tr>
<td align="center"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; letter-spacing:1px">PLEASE JOIN</span></td>
</tr>
<tr>
<td align="center"><img src="http://www.kravetcontract.com/email_blasts/BDNY2016/logo.png" alt="kravetcontract" style="max-width:280px" /></td>
</tr>
<tr>
<td align="center"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; letter-spacing:1.5px">AT THIS YEAR'S</span></td>
</tr>
<tr>
<td align="center"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/newh_logo_2.png" alt="NEWH" style="max-width:192px" /></td>
</tr>
<tr>
<td align="center" valign="middle"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011;letter-spacing:1.5px">MARCH 7, 2017 AT 12PM-6PM<br />
BOOTH #613</span></td>
</tr>
<tr>
<td align="center" valign="middle"><span style="font:normal 81.25% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; letter-spacing:1.5px">9840 International Drive<br />
Orlando, Florida</span></td>
</tr>
<tr>
<td align="center"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; line-height:21px; letter-spacing:1.5px">We look forward to seeing you.</span></td>
</tr>
</table>
</td>
<td align="right" valign="middle" class="desktop" width="78"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/right.jpg" alt="Right" style="max-width:78px" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/bottom.jpg" alt="Bottom" style="max-width:600px" /></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#56565a">
<table cellpadding="0" cellspacing="5" align="center" border="0">
<tr>
<td bgcolor="#56565a">GET DIRECTIONS <strong style="font-family:Arial, sans-serif;">►</strong></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20"></td>
</tr>
<tr>
<td><img src="http://www.kravet.com/style-spotlight/one-family.gif" alt="One Family. Ninety-Eight Years." border="0" style="border:none; width:100%" /></td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td align="center"><span style="font:normal 150% Helvetica, Arial, sans-serif; color:#858585"><span style="font:normal 87.5%/4mm Helvetica, Arial, sans-serif; color:#858585">#</span>kravetinc</span>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" align="center" border="0">
<tr>
<td>
<img src="http://www.kravet.com/style-spotlight/instagram.gif" alt="Instagram" border="0" style="border:none; width:100%; max-width:50px" />
</td>
<td width="10"> </td>
<td>
<img src="http://www.kravet.com/style-spotlight/facebook.gif" alt="Facebook" border="0" style="border:none; width:100%; max-width:50px" />
</td>
<td width="10"> </td>
<td>
<img src="http://www.kravet.com/style-spotlight/pinterest.gif" alt="Pinterest" border="0" style="border:none; width:100%; max-width:50px" />
</td>
<td width="10"> </td>
<td>
<img src="http://www.kravet.com/style-spotlight/twitter.gif" alt="Twitter" border="0" style="border:none; width:100%; max-width:50px" />
</td>
<td width="10"> </td>
<td>
<img src="http://www.kravet.com/style-spotlight/houzz.gif" alt="Houzz" border="0" style="border:none; width:100%; max-width:50px" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td align="center">e-designtrade.com</td>
</tr>
<tr>
<td height="40"></td>
</tr>
<tr>
<td align="center"><span style="font:normal 75% Helvetica, Arial, sans-serif; color:#858585">KRAVET® INC | CONTACT US | PRIVACY POLICY</span></td>
</tr>
<tr>
<td align="center"><span style="font:bold 75% Helvetica, Arial, sans-serif; color:#858585">Exclusively Available Through Interior Designers</span></td>
</tr>
<tr>
<td height="40"></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font: normal 68.75% Helvetica, Arial, sans-serif; color: #858585;" xml="lang">This email was sent to %%!contact_email%% by %%!account_organization%%</span></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font: normal 68.75% Helvetica, Arial, sans-serif; color: #858585;" xml="lang">%%!account_address1%% | %%!account_city%%, %%!account_state%% %%!account_zip%%</span></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font:normal 68.75% Helvetica, Arial, sans-serif; color:#858585">Forward to a friend | Manage Preferences | Unsubscribe</span></td>
</tr>
<tr>
<td height="40"></td>
</tr>
</table>
<!-- /table.container -->
</div>
<!-- /div.container -->
</body>
Try using display block on all images.
style="display:block;"
This is a must have on all images.
Cheers
To be quite honest, I actually love the way it looks haha.
But I believe your issue is the img. It's based on the width. The aspect ratio makes the height smaller then the size of the table row. This is probably not the best way to fix it, but after going through a bunch of css changes I couldn't get it to work any other way:
On the specific images. Set the img style to be moved 4 px down:
transform: translateY(4px);
Bottom image, 4 px up:
transform: translateY(-4px);
Ex:
Bottom:
<img src="http://www.kravetcontract.com/email_blasts/newh-2017/bottom.jpg" alt="Bottom" style="max-width:600px;transform: translateY(-4px);">
Should look like this:
Email isn’t scaling to screen size in outlook. Testing with email on acid and it’s working for other clients, can anyone give me advice?
Code is below. Would appreciate some advice on what needs fixing as this is my first attempt to code an email.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>See what our customers say</title>
<style type="text/css">
</style>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
</head>
<body bgcolor="#ebebeb" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important; border-collapse: collapse !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
<tbody>
<tr>
<td width="640">
<table align="center" border="0" cass="container" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td bgcolor="#ffffff" border="0" class="logo" valign="top" width="100%" height="auto" align="center" style="width: 100%; background-color: rgb(255, 255, 255); background-position: initial initial; background-repeat: initial initial;" pardot-data=""><img alt="Pay4Later" border="0" src="http://go.pardot.com/l/73452/2015-08-18/23htmw/73452/32364/testimonials.jpg" style="display: block; width: 100%;" width="100%"></td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" class="headline" style="padding: 15px 20px 5px 30px; border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; width: 100%;" valign="top">
<h1 style="margin: 0px 0px 15px 0px; font-weight: normal; font-size: 32px; line-height: 32px; color: #414141;">DON'T JUST TAKE<br>
OUR WORD FOR IT</h1>
<p><i>See what our customers say</i></p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 0px 60px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; color: rgb(65, 65, 65); width: 100%; background-color: rgb(249, 246, 242); background-position: initial initial; background-repeat: initial initial;" valign="top" pardot-data="">There’s no doubt that offering finance to your customers is a guaranteed way to dramatically increase your sales. Pay4Later takes digital lending further by giving you market leading acceptance rates and maximising order values, but don’t just take our word for it. See what our customers say...</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" pardot-data="" style="padding: 20px 0px; background-color: rgb(249, 246, 242); background-position: initial initial; background-repeat: initial initial; width: 100%;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4y5/73452/34330/cotswold.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-09-02/26hr5h/73452/35206/mango.png" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yt/73452/34340/oak_furniture.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yf/73452/34336/gymkit_uk.jpg" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img height="3" src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png" style="width: 544px; height: 3px;" width="544"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yp/73452/34338/wongs.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-09-07/26x153/73452/35954/home_leisure.png" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding-top: 30px;" width="640">
<table align="center" bgcolor="#f9f6f2" style="border:2px solid #000000;" width="200">
<tbody>
<tr>
<td align="center" style="padding:10px 6px;" class=""><span style="font-family: 'Roboto', Helvetica, Arial, sans-serif !important;">SIGNUP NOW</span> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 50px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141;" valign="top">To learn more about how your business can benefit from Pay4Later’s finance solutions you can reply to this email or call us on 0800 021 7150.</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 50px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:8px; color: #414141;" valign="top">
<p><span>Kind Regards,</span></p>
<p><span>The Pay4Later Team</span></p>
<p><span>0800 021 7150</span></p>
</td>
</tr>
<tr>
<td width="640">
<table align="center" bgcolor="#0092ce" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" bgcolor="#0092ce" class="content" style="padding: 30px 100px 10px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:8px; color: #ffffff;" valign="top" width="100%">
<p><span>Pay4Later Ltd</span></p>
<p><span>33 St Mary Axe</span></p>
<p><span>London, EC3A 8AG</span></p>
</td>
<td class=""><img alt="Twitter" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hq9t/73452/35156/twitter.png" style="width: 30px; height: 30px; border-width: 0px; border-style: solid;" title="Twitter" width="30"> </td>
<td class=""><img alt="Google" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hqr7/73452/35184/linkedIn.png" style="width: 30px; height: 30px; padding-left: 15px; border-width: 0px; border-style: solid;" title="Google" width="30"> </td>
<td class=""><img alt="RSS" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hqrp/73452/35186/mail.png" style="width: 30px; height: 30px; padding-left: 15px; padding-top: 7px; padding-right: 20px; border-width: 0px; border-style: solid;" title="RSS" width="30"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#ebebeb" class="content" style="padding: 10px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 14px; line-height:22px; color: #414141;" valign="top">If you don't want to receive more mails, just click here</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>
</body>
</html>
If by "scale to screen" you mean that the image is so much larger in all Outlook, this is because Outlook tends to size images based on the actual size of the hosted image, not your declarations - especially when used as percentages. Your best bet is to resize the hosted image to 640px wide and Outlook should behave properly.
There are many different theories on getting around this, but the only definitive way I have found is to make Outlook behave is to resize the images to the scale you want them to be.
HTML attributes (as in, width="640") can be used to resize images in Outlook. If width is defined, height will be rescaled accordingly. This works in all Outlook versions. However, the image will not be fluid (100% width) with this fix in place. It doesn't look like that's an issue for your email, as it doesn't contain any responsive code. If you use media queries, a style with !important should be able to overwrite this width.
Here is a test showing how this will look: https://www.emailonacid.com/app/acidtest/display/summary/r9Sdqkr0J2kICtkrwc0RUkioQ0uX2yID1BEMvfLUEUczL/shared
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>See what our customers say</title>
<style type="text/css">
</style>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
<body bgcolor="#ebebeb" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important; border-collapse: collapse !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
<tbody>
<tr>
<td width="640">
<table align="center" border="0" class="container" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td bgcolor="#ffffff" border="0" class="logo" valign="top" width="100%" height="auto" align="center" style="width: 100%; background-color: rgb(255, 255, 255); background-position: initial initial; background-repeat: initial initial;" pardot-data=""><a href="#">
<img alt="Pay4Later" border="0" src="http://go.pardot.com/l/73452/2015-08-18/23htmw/73452/32364/testimonials.jpg" style="display: block; width: 640px;" width="640">
</a></td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" class="headline" style="padding: 15px 20px 5px 30px; border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; width: 100%;" valign="top">
<h1 style="margin: 0px 0px 15px 0px; font-weight: normal; font-size: 32px; line-height: 32px; color: #414141;">DON'T JUST TAKE<br>
OUR WORD FOR IT</h1>
<p><i>See what our customers say</i></p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 0px 60px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; color: rgb(65, 65, 65); width: 100%; background-color: rgb(249, 246, 242); background-position: initial initial; background-repeat: initial initial;" valign="top" pardot-data="">There’s no doubt that offering finance to your customers is a guaranteed way to dramatically increase your sales. Pay4Later takes digital lending further by giving you market leading acceptance rates and maximising order values, but don’t just take our word for it. See what our customers say...</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" pardot-data="" style="padding: 20px 0px; background-color: rgb(249, 246, 242); background-position: initial initial; background-repeat: initial initial; width: 100%;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4y5/73452/34330/cotswold.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-09-02/26hr5h/73452/35206/mango.png" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yt/73452/34340/oak_furniture.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yf/73452/34336/gymkit_uk.jpg" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img height="3" src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png" style="width: 544px; height: 3px;" width="544"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yp/73452/34338/wongs.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-09-07/26x153/73452/35954/home_leisure.png" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding-top: 30px;" width="640">
<table align="center" bgcolor="#f9f6f2" style="border:2px solid #000000;" width="200">
<tbody>
<tr>
<td align="center" style="padding:10px 6px;" class=""><span style="font-family: 'Roboto', Helvetica, Arial, sans-serif !important;">SIGNUP NOW</span> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 50px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141;" valign="top">To learn more about how your business can benefit from Pay4Later’s finance solutions you can reply to this email or call us on 0800 021 7150.</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 50px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:8px; color: #414141;" valign="top">
<p><span>Kind Regards,</span></p>
<p><span>The Pay4Later Team</span></p>
<p><span>0800 021 7150</span></p>
</td>
</tr>
<tr>
<td width="640">
<table align="center" bgcolor="#0092ce" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" bgcolor="#0092ce" class="content" style="padding: 30px 100px 10px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:8px; color: #ffffff;" valign="top" width="100%">
<p><span>Pay4Later Ltd</span></p>
<p><span>33 St Mary Axe</span></p>
<p><span>London, EC3A 8AG</span></p>
</td>
<td class=""><img alt="Twitter" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hq9t/73452/35156/twitter.png" style="width: 30px; height: 30px; border-width: 0px; border-style: solid;" title="Twitter" width="30"> </td>
<td class=""><img alt="Google" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hqr7/73452/35184/linkedIn.png" style="width: 30px; height: 30px; padding-left: 15px; border-width: 0px; border-style: solid;" title="Google" width="30"> </td>
<td class=""><img alt="RSS" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hqrp/73452/35186/mail.png" style="width: 30px; height: 30px; padding-left: 15px; padding-top: 7px; padding-right: 20px; border-width: 0px; border-style: solid;" title="RSS" width="30"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#ebebeb" class="content" style="padding: 10px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 14px; line-height:22px; color: #414141;" valign="top">If you don't want to receive more mails, just click here</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>
</body>
</html>
As far as I know there really isn't any kind of scaling for emails in outlook, they take a fixed size and then keep it that way. As has been mentioned you can specify widths in attributes, and this will force that content to the size you specify.
One fairly popular way is starting with a fixed size and then setting elements of the email to have a % max width; this means that outlook will be happy with the fixed widths, and clients which support % widths will also be able to display yor content in a responsive way.