I'm trying to create responsive emailer which is not working in Outlook. Can you please help me out? I also tried to inset div align center but still not working.
Right now its center align but when I view it on mobile its left align.
<center>
<!--[if mso]>
<table style="width: 300px;">
<tr>
<td>
<![endif]-->
<!--one-->
<table border="0" cellpadding="0" cellspacing="0" align="left" width="225" height="158" bgcolor="#006699">
<tr>
<td style="padding: 0;" align="left" class="responsive-image middle">
<img src="http://www.eruditus.com/emailer/0418_responsive_columbia/bg.jpg" style="display: block; margin: 0; padding: 0;">
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="225" bgcolor="#0093d4" height="158px">
<tr>
<td width="" style="padding: 0 0 0 0; background-color: #0093d4; vertical-align: top;" bgcolor="#0093d4" valign="top">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#0093d4">
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 5px 0 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
</tr>
<tr>
<td width="56" style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 5px 0 0 10px;" bgcolor="#0093d4" valign="top">Email:</td>
<td width="273" style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0;" bgcolor="#0093d4" valign="top">EPM_columbia#eruditus.com
</td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0 0 0 10px;" bgcolor="#0093d4" valign="top">Phone:</td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0px; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+91 22 6162 3112(India)</span>
</td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+971 044302011(Dubai)</span>
</td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+1 862 252 5823(USA)</span>
</td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
</tr>
</table>
</td>
</tr>
</table>
</center>
Place the table inside a div and in the div tag give align="centre".
This may solve the issue.
Related
I am trying to send an email using Django. The email template was made by someone else with a ton of CSS and it will take a lot of hours just to "inline" it. So I used premailer to inline the CSS automatically. It worked pretty well till I saw that it also inlined the media queries that were responsible for the responsiveness of the templates.
One solution I saw was to put media queries in a separate style tag and put
data-premailer="ignore"
but unfortunately, I think this solution does not work anymore.
I also tried using django_inlinecss, but that didn't work for me also.
Please let me know how to fix premailer or if there any other package available that can inline CSS.
Hello #ahsan mukhtar you don't have to use any external library use django EmailMessage
from django.core.mail import EmailMessage
from domain_project import settings
from django.template.loader import get_template
from django.shortcuts import render,redirect
from django.http import JsonResponse
from contact.models import Contact
def contact(request):
if request.is_ajax():
contact = Contact()
contact.name = request.GET.get('name')
contact.email = request.GET.get('email')
contact.phone = request.GET.get('phone')
contact.subject = request.GET.get('subject')
contact.message = request.GET.get('message')
contact.save()
ctx = {
'name': request.GET['name'],
'email': request.GET['email'],
'phone': request.GET['phone'],
'message':request.GET['message']
}
email_temp = get_template('email_template/contact_email.html').render(ctx)
msg = EmailMessage(
'Hello'+' '+str(request.GET['name']),
email_temp,
settings.DEFAULT_FROM_EMAIL,
[request.GET.get('email'),],
)
msg.content_subtype = "html"
msg.send()
return JsonResponse({'massage':"massage"},safe=True)
<!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">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
#media screen {
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v11/RYyZNoeFgb0l7W3Vu1aSWOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 700;
src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v11/HkF_qI1x_noxlxhrhMQYELO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
}
/* CLIENT-SPECIFIC STYLES */
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
/* RESET STYLES */
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* MOBILE STYLES */
#media screen and (max-width:600px) {
h1 {
font-size: 32px !important;
line-height: 32px !important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] {
margin: 0 !important;
}
</style>
</head>
<body style="background-color: #f4f4f4; margin: 0 !important; padding: 0 !important;">
<!-- HIDDEN PREHEADER TEXT -->
<div
style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: 'Lato', Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<!-- LOGO -->
<tr>
<td bgcolor="#ed3936" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td align="center" valign="top" style="padding: 40px 10px 40px 10px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ed3936" align="center" style="padding: 0px 10px 0px 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<!-- name,email,phone,looking_for,message -->
<td bgcolor="#ffffff" align="center" valign="top"
style="padding: 40px 20px 20px 20px; border-radius: 4px 4px 0px 0px; color: #111111; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; letter-spacing: 4px; line-height: 48px;">
<h1 style="font-size: 30px; font-weight: 400; margin: 1;">Welcome! <br>
<span style="font-size: 20px; font-weight: 500;">{{ name }}</span></h1>
<img src="https://media.itdude.in/media/email_template.png" width="125" height="120"
style="display: block; border: 0px;" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#f4f4f4" align="center" style="padding: 0px 10px 0px 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td bgcolor="#ffffff" align="left"
style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<h4 style="margin-bottom: 0;">Your Requrement :</h4>
<p style="margin: 0;">{{ message }}<br></p>
<p style="color:black;">You will receive a call frome us within 2 working days.</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left"
style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<p style="margin-bottom: -50px; color:black; text-align:center;">We're excited to have you
get started. Explore our Website. Just press the button below.</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 20px 30px 60px 30px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="#ed3936"><a
href="https://domain.in/" target="_blank"
style="font-size: 20px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; padding: 15px 25px; border-radius: 2px; border: 1px solid #ed3936; display: inline-block; ">Explore
Our Website</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr> <!-- COPY -->
<tr>
<td bgcolor="#ffffff" align="left"
style="padding: 0px 30px 20px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<p style="margin: 0;">If you have any questions, just reply to this email—we're always happy
to help out.</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left"
style="padding: 0px 30px 40px 30px; border-radius: 0px 0px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<p style="margin: 0; color:red;">Domain</p>
<small style="color:black;">TECH SOLUTIONS PVT. LTD.</small><br>
<small>
<b>Phone:</b>
<a href="tel:+91 9999999999" target="_blank" style="text-decoration:none;">
+91 9999999999
</a><br>
<b>Email:</b>
<a href="mailto:contact#domain.in" target="_blank" style="text-decoration:none;">
contact#domain.in
</a></small>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#f4f4f4" align="center" style="padding: 30px 10px 0px 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td bgcolor="#FFECD1" align="center"
style="padding: 30px 30px 30px 30px; border-radius: 4px 4px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<h2 style="font-size: 20px; font-weight: 400; color: #111111; margin: 0;">Need more help?
</h2>
<p style="margin: 0;"><a href="https://domain.in/contact/" target="_blank"
style="color: #5762cc;">We’re here to help you out</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I need to create an agreement document on the fly with the customer information like name, address etc.
Customer has to click the checkbox to confirm before proceed to payment process.
It is most likely a terms and conditions page with customer information.
Is it possible?
You may see an example of it below to find which parts of the file will be filled on the fly:
All the red parts should be filled with customer and cart information.
Agreement form
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 11pt; line-height: 18px;">
<p>INFORMATION FORM</p>
<p>1. SELLER INFORMATION</p>
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 130px;">Company</td>
<td style="width: 10px;">:</td>
<td>Placeholder (Referred to as "Seller")</td>
</tr>
<tr>
<td style="width: 130px;">Address</td>
<td style="width: 10px;">:</td>
<td>Placeholder</td>
</tr>
<tr>
<td style="width: 130px;">Phone</td>
<td style="width: 10px;">:</td>
<td>Placeholder</td>
</tr>
<tr>
<td style="width: 130px;">E-mail</td>
<td style="width: 10px;">:</td>
<td>Placeholder</td>
</tr>
</tbody>
</table>
<br>
<p>2. CLIENT INFORMATION</p>
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 130px;">Name / Sirname</td>
<td style="width: 10px;">:</td>
<td style="color: red;">**********</td>
</tr>
<tr>
<td style="width: 130px;">Shipping Address</td>
<td style="width: 10px;">:</td>
<td style="color: red;">**********</td>
</tr>
<tr>
<td style="width: 130px;">Phone</td>
<td style="width: 10px;">:</td>
<td style="color: red;">**********</td>
</tr>
<tr>
<td style="width: 130px;">E-mail</td>
<td style="width: 10px;">:</td>
<td style="color: red;">**********</td>
</tr>
</tbody>
</table>
<br>
<p>4. AGREEMENT SUBJECT AND THE PRODUCT SPECS</p>
<table style="border: 1px solid #808080; width: 100%; border-collapse: collapse; line-height: 24px; font-size: 12px;" cellspacing="2">
<tbody>
<tr>
<td style="height: 25px; border: 1px solid #808080;"><b>Product</b></td>
<td style="width: 50px; text-align: center; height: 25px; border: 1px solid #808080;"><b>Quantity</b></td>
<td style="width: 150px; text-align: center; height: 25px; border: 1px solid #808080;"><b>Price</b></td>
<td style="width: 150px; text-align: center; height: 25px; border: 1px solid #808080;"><b>Total</b></td>
</tr>
</tbody>
</table>
<table style="border: 1px solid #808080; width: 100%; border-collapse: collapse; line-height: 24px; font-size: 12px;" cellspacing="2">
<tbody>
<tr>
<td style="height: 25px; border: 1px solid #808080; color: red;">Arduino Uno R3 SMD Klon CH340 Chip</td>
<td style="width: 50px; text-align: center; height: 25px; border: 1px solid #808080; color: red;">*</td>
<td style="text-align: center; height: 25px; border: 1px solid #808080; width: 150px; color: red;">$***</td>
<td style="text-align: center; height: 25px; border: 1px solid #808080; width: 150px; color: red;">$***</td>
</tr>
</tbody>
</table>
<table style="border: 1px solid #808080; width: 100%; border-collapse: collapse; line-height: 24px; font-size: 12px;" cellspacing="2">
<tbody>
<tr>
<td style="height: 25px; border: 1px solid #808080; color: red;">LattePanda Windows 10 2G/32GB</td>
<td style="width: 50px; text-align: center; height: 25px; border: 1px solid #808080; color: red;">*</td>
<td style="text-align: center; height: 25px; border: 1px solid #808080; width: 150px; color: red;">$***</td>
<td style="text-align: center; height: 25px; border: 1px solid #808080; width: 150px; color: red;">$***</td>
</tr>
</tbody>
</table>
<table style="border: 1px solid #808080; width: 100%; border-collapse: collapse; line-height: 24px; font-size: 12px;" cellspacing="2">
<tbody>
<tr>
<td style="height: 25px; border: 1px solid #808080; color: red;">Raspberry Pi 3 Model B+ Plus</td>
<td style="width: 50px; text-align: center; height: 25px; border: 1px solid #808080; color: red;">*</td>
<td style="text-align: center; height: 25px; border: 1px solid #808080; width: 150px; color: red;">$***</td>
<td style="text-align: center; height: 25px; border: 1px solid #808080; width: 150px; color: red;">$***</td>
</tr>
</tbody>
</table>
<table style="border: 1px solid #808080; width: 100%; border-collapse: collapse; line-height: 24px; font-size: 12px;" cellspacing="2">
<tbody>
<tr>
<td style="height: 25px; border: 1px solid #808080; color: red;">BBC Micro:Bit Dev Card</td>
<td style="width: 50px; text-align: center; height: 25px; border: 1px solid #808080; color: red;">*</td>
<td style="text-align: center; height: 25px; border: 1px solid #808080; width: 150px; color: red;">$***</td>
<td style="text-align: center; height: 25px; border: 1px solid #808080; width: 150px; color: red;">$***</td>
</tr>
</tbody>
</table>
<table style="border: 1px solid #808080; width: 100%; border-collapse: collapse; line-height: 24px; font-size: 12px;" cellspacing="2">
<tbody>
<tr>
<td colspan="3" style="border: 1px solid #808080; height: 25px;">Shipping</td>
<td colspan="1" style="border: 1px solid #808080; height: 25px; text-align: right; width: 150px; color: red;"><b>************</b></td>
</tr>
<tr>
<td colspan="3" style="border: 1px solid #808080; height: 25px;">Payment Method</td>
<td style="text-align: right; border: 1px solid #808080; height: 25px; width: 150px; color: red;" colspan="1">************</td>
</tr>
<tr>
<td colspan="3" style="border: 1px solid #808080; height: 25px;"><b>Total</b></td>
<td colspan="1" style="border: 1px solid #808080; height: 25px; text-align: right; width: 150px; color: red;"><b>************</b></td>
</tr>
</tbody>
</table>
I have the following code.
<tr>
<td align="left" style="padding-top: 10px;" bgcolor="#fffff">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="40%" align="left" bgcolor="#c8f4ca" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
Attraction Name:
</td>
<td width="60%" align="right" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
Arlington Hotel Celtic Night
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="25%" align="right" style="max-width: 25%;">
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
Email:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
info#celticnights.com
</td>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
Website:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
http://celticnights.com
</td>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
Reservation:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
Required
</td>
</tr>
</table>
</td>
</tr><tr>
<td align="left" style="padding-top: 10px;" bgcolor="#fffff">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="40%" align="left" bgcolor="#c8f4ca" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
Attraction Name:
</td>
<td width="60%" align="right" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
Ashtown Castle
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="25%" align="right" style="max-width: 25%;">
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
Email:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
phoenixparkvisitorcentre#opw.ie
</td>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
Website:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px; word-wrap: break-word;">
http://www.heritageireland.ie/en/dublin/phoenixparkvisitorcentre-ashtowncastle/
</td>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
Reservation:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
Not Required
</td>
</tr>
</table>
</td>
</tr>
The problem is that the second attraction details does not seem to follow the maximum width. I know that this is occurring because of the long website url.
I have a couple of questions relating to this:
Why is the url not breaking onto multiple lines?
Is there a way I can force it into multiple lines without modifying the URL?
Use css rule word-break: break-all;
table tr td:nth-child(2) {
word-break: break-all;
}
<table>
<tr>
<td align="left" style="padding-top: 10px;" bgcolor="#fffff">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="40%" align="left" bgcolor="#c8f4ca" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
Attraction Name:
</td>
<td width="60%" align="right" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
Arlington Hotel Celtic Night
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="25%" align="right" style="max-width: 25%;">
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
Email:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
info#celticnights.com
</td>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
Website:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
http://celticnights.com
</td>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
Reservation:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
Required
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" style="padding-top: 10px;" bgcolor="#fffff">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="40%" align="left" bgcolor="#c8f4ca" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
Attraction Name:
</td>
<td width="60%" align="right" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
Ashtown Castle
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="25%" align="right" style="max-width: 25%;">
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
Email:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
phoenixparkvisitorcentre#opw.ie
</td>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
Website:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px; word-wrap: break-word;">
http://www.heritageireland.ie/en/dublin/phoenixparkvisitorcentre-ashtowncastle/
</td>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
Reservation:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
Not Required
</td>
</tr>
</table>
I am trying to make an html signature using a table, however I can't seem to get it to look clean on mobile. I have tried the "Sky's the limit" height at "190px" keeping it from expanding over the entire page in outlook (everyone at this office uses outlook, my code works in most emails but not in outlook for some reason), but it looks funny after opened in mobile. To keep this weird table adjustment from happening, putting the image at 100% width has helped but it expands over the entire page on a normal email and still doesn't look great on mobile. Is there any way I can get my code to look the way I want it to on both mobile and desktop?
At 190px on mobile:
At 100% on mobile:
How I want it to look:
My Code:
<div style="height: 190px; width: 500px; max-height: 190px; max-width: 500px; min-width: 500px;">
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr><td valign="center" style="padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0px; border-top: 0; border-bottom: 0: border-left: 0; border-right: solid #2b2b2b"><img id="preview-image-url" src="https://i.imgur.com/JeK1isp.png" nosend="1" border="0" height="100%" alt="SkyBound USA"></td>
<td style= "padding-top:0; padding-bottom:0; padding-left: 5px; padding-right: 5px; background: #2b2b2b" >
<td valign="bottom" style="padding-left: 0px; padding-right: 0px; background: #2b2b2b;" >
<a href="https://www.instagram.com/skybound.trampolines/">
<img src="https://i.imgur.com/h7f7fjo.png" nosend="1" border="0" height="30" alt="Instagram">
</a><br>
<a href="https://www.facebook.com/SkyBoundUSA/">
<img src="https://i.imgur.com/MJ35g0C.png" nosend="1" border="0" width="30" alt="Facebook">
</a><br>
<a href="https://www.youtube.com/channel/UCH0821QeTOByekqpvrAE6pQ">
<img src="https://i.imgur.com/NuZrjP6.png" nosend="1" border="0" width="30" alt="YouTube">
</a><br>
</td>
<td style= "padding-top:0; padding-bottom:0; padding-left: 5px; padding-right: 5px; background: #2b2b2b;" >
<td style="padding-top: 0; padding-bottom: 0; padding-left: 12px; padding-right: 15px; background: #ebebeb">
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0; background: #ebebeb;">
<tr>
<td colspan="2">
<a href= "https://www.skyboundusa.com/"><img src= "https://i.imgur.com/Ml3FJ3X.png" nosend="1" border="0" width="90" padding-bottom="5" alt="Facebook"></td></tr>
<tr>
<!-- name goes here -->
<td colspan="2" style="padding-bottom: 3px; color: orange; font-size: 18px; font-family: Arial, Helvetica, sans-serif; padding-top: 5px; ">CORINNE NICEWICK</td></tr>
<tr><td colspan="2" style="color: #2b2b2b; font-size: 14px; font-family: Arial, Helvetica, sans-serif;">
<!-- title goes here -->
<i>Design and Marketing Consultant</i></td></tr>
<tr>
<td colspan="2" style="color: #2b2b2b; font-size: 14px; font-family: Arial, Helvetica, sans-serif;">
<strong>SkyBound USA</strong></td></tr>
<tr><td width="5" valign="top" style="vertical-align: top; width: 20px; color: orange; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">p:</td>
<!-- phone numbers go here primary first, then mobile-->
<td valign="top" style="vertical-align: top; color: #2b2b2b; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"> 888.891.4689
<span style="color: orange;">m: </span>703.795.7373</td></tr>
<tr><td width="5" valign="top" style="vertical-align: top; width: 20px; color: orange; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">a:</td>
<td valign="top" style="vertical-align: top; color: #2b2b2b; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">3140 Warner Ave., Santa Ana, CA 92704</td></tr>
<tr><td width="5" valign="top" style="vertical-align: top; width: 20px; color: orange; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">w:</td>
<td valign="top" style="vertical-align: top; color: #2b2b2b; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">
www.SkyBoundUSA.com</td></tr>
<tr><td width="5" valign="top" style="vertical-align: top; width: 20px; color: orange; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">e:</td>
<td valign="top" style="vertical-align: top; color: #2b2b2b; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">
cnicewick#skyboundusa.com</td></tr>
<!-- email goes here - replace mailto and name -->
<tr>
</td>
</tr>
</table>
</td></tr></table>
</div>
I have a table where I'd like the row/table head to be red, but with a slightly rounded corner to be smoother than a straight edge, but I also need to space the width between the heading or the radius would be pointless. Only option I can think of is creating an empty th for a divider. But would prefer a CSS fix.
Code
.restaurant {
width: 80%;
background-color: #FFFFFF;
color: #000000;
border: 1px solid #FFFFFF;
z-index: -1;
}
.restaurant tr {
width: 100%;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
border-spacing: 5px;
z-index: -1;
}
.restaurant td {
height: 100%;
background-color: #FFFFFF;
color: #000000;
border: 1px solid #FFFFFF;
z-index: -1;
}
.restaurant th {
line-height: 15px;
background-color: #DE0000;
color: #FFFFFF;
border: 5px solid #FFFFFF
border-spacing: 10px;
border-radius: 4px;
}
html
<table class="restaurant">
<tr>
<td colspan="2">
<table class="restaurant-corners">
<tr>
<td width="10%">
<img src="/css/images/menu-corner-top-left.png" class="corners">
</td>
<td width="80%">
</td>
<td width="10%">
<img src="/css/images/menu-corner-top-right.png" class="corners" align="right">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table class="restaurant-logo" cellspacing="0">
<tr>
<td colspan="3">
<center><img src="/css/uncletoms.png"></center>
</td>
</tr>
<tr>
<th width="80%">
<h2>Breakfast</h2>
</th>
<th width="20%">
<h2>Drinks</h2>
</th>
</tr>
</table>
Probably more information there then needed. But I wanted to make sure I didn't missing anything.
When designing a table with rounded corners, do not use border-collapse: collapse. OP's request for row to be red is vague...Red borders? Text? Background?...Need specifics. We will apply border-radius to the table's border and to the first and last <th> borders. See the comments in the Snippet:
section {
padding: 20px 10px;
width: 100%;
height: auto;
border-bottom: 3px ridge #FF6;
margin: 0 5px 20px;
}
table.x {
position: relative;
padding: 0;
box-shadow: 0 1px 9px 1px #ccc;
/* This will round the outside border on all 4 corners */
/* If you want only the head to have rounded corners uncomment *1* ruleset and remove or comment *2*/
/* border-top-left-radius: 6px;
border-top-right-radius: 6px;
*/
border-radius: 6px;
margin: 20px auto;
table-layout: fixed;
width: 50%;
height: 100%;
max-height: 550px;
}
.x th {
color: #FFF;
background: #2C7EDB;
padding: 10px;
text-align: center;
vertical-align: middle;
}
.x tr:nth-child(odd) {
background-color: #333;
color: #FFF;
}
.x tr:nth-child(even) {
background-color: #D3E9FF;
color: #333;
}
.x td {
border-style: solid;
border-width: 1px;
border-color: #264D73;
padding: 5px;
text-align: left;
vertical-align: top;
position: relative;
}
/* Next 2 rulesets are used to create rounded corners to the inner borders of the head */
/* Remove or comment the last 2 rulesets if you don't want the bottom corners rounded */
.x thead th:first-child {
border-top-left-radius: 6px;
}
.x thead th:last-child {
border-top-right-radius: 6px;
}
.x tbody tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
.x tbody tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
<section>
<table class="x">
<caption>table.x</caption>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</tbody>
</table>
</section>