How can you force a wordbreak in HTML? - css

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>

Related

How to force background color in gmail for Dark Mode?

I am working on HTML email templates.I am stuck with forcing background color and text color attributes for Dark mode.My normal inline css is background-color:#f2f2f2 and color:#191919.But in dark mode I want background-color:#ff5f00 and color:#ffffff.
I am able to achieve the same in outlook using #media but as said in various blogs to use blend modes for gmail,I am not able to achieve the same.Can anyone help with a HTML template or HTML code?
CODE:
<html>
<head>
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
body {
font-family: Arial;
background-color: #eee;
color: #111;
}
.Greetings_section {
background-color: #f2f2f2;
padding: 40px 20px;
}
.darkmodecustom {
background-color: #f2f2f2;
color: #191919;
padding: 5px;
}
.bg-orange {
background-color: #FF5F00;
border-color: 1px solid #ff5f00;
}
.button_text {
color: #ffffff;
}
.darkimage {
display: none;
}
a[href] {
color: #ffffff;
}
#media (prefers-color-scheme: dark) {
body {
background-color: #111;
color: #eee;
}
.Greetings_section {
background-color: #f2f2f2;
padding: 20px 10px;
}
.darkmodecustom {
background-color: #f2f2f2;
color: #eee;
padding: 5px;
}
.bg-orange {
background-color: #FF5F00;
border-color: 1px solid #FF5F00;
}
.button_text {
color: #eee;
}
}
[data-ogsc] .body {
background-color: #111;
color: #eee;
}
[data-ogsc] .Greetings_section {
background-color: #f2f2f2;
padding: 40px 20px;
}
[data-ogsc] .darkmodecustom {
background-color: #f2f2f2;
color: white;
padding: 5px;
}
[data-ogsc] .bg-orange {
background-color: #FF5F00;
border-color: 1px solid #ff5f00;
}
[data-ogsc].button_text {
color: #eee;
}
</style>
</head>
<body class="body">
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" style="background-color:azure;padding:10px">
<tr>
<td style="padding: 5px;">Dark mode - System (User Agent Styles)</td>
</tr>
<tr>
<td align="center" bgcolor="transparent" style="padding:0px; font-size:0px; line-height:0px;" valign="top" width="100%">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" style="padding:0; max-width:600px; font-size:0px; line-height:0px; background-color:#ffffff" width="100%">
<tr>
<td align="left" class="mobile-padding Greetings_section" style="padding:0px 24px 20px 24px; font-size:0px; line-height:0px" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" class="mobile-padding Greetings_section" style=" font-size:0px; line-height:0px;" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" class="fs14lh16 darkmodecustom" style="padding:0px 0px 8px 0px; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:20px; line-height:24px; font-weight:600; color:#191919" valign="top">
<span class="fs14lh16" style="font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:20px; line-height:24px; font-weight:600; color:#191919"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero, facilis assumenda soluta id ut labore ipsa aliquam reprehenderit</span>
</td>
</tr>
<tr>
<td align="left" style="padding:0px; font-size:0px; line-height:0px" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" class="fs12lh14 darkmodecustom" style="padding:8px 0px 0px 0px; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919" valign="top" width="15">
<span class="fs12lh14" style="font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919">•</span>
</td>
<td align="left" class="fs12lh14" style="padding:8px 0px 0px 0px; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919" valign="top">
<span class="fs12lh14" style="font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919">Lorem ipsum dolor, sit amet consectetur adipisicing elit. </span>
</td>
</tr>
<tr>
<td align="left" class="fs12lh14 darkmodecustom" style="padding:8px 0px 0px 0px; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919" valign="top" width="15">
<span class="fs12lh14" style="font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919">•</span>
</td>
<td align="left" class="fs12lh14" style="padding:8px 0px 0px 0px; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919" valign="top">
<span class="fs12lh14" style="font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919">Lorem ipsum dolor, sit amet consectetur adipisicing elit. </span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" style="padding:16px 0px 0px 0px; font-size:0px; line-height:0px" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="middle">
<table border="0" cellpadding="0" cellspacing="0" class="bg-orange" width="auto">
<tr>
<!--[if (gte mso 9)|(IE)]>
<td width="20"> </td>
<![endif]-->
<td align="center" class="h32px fs12lh14 bg-orange" width="144" height="44" style="color:#191919; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; mso-line-height-rule:exactly; line-height:16px; font-weight:600; padding:0" valign="middle">
<a class="fs12lh14 button_text" href="#" style="text-decoration:none; display:block; padding:8px 16px 8px 16px;" target="_blank">Lorem ipsum dolor </a>
</td>
<!--[if (gte mso 9)|(IE)]>
<td width="20"> </td>
<![endif]-->
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

I would suggest using the #media (prefers-color-scheme: dark) media query and creating a couple classes. Then apply those classes to the elements that should have the darkmode style applied.
Example:
#media (prefers-color-scheme: dark) {
.darkmode-bg {
background-color: #ff5f00 !important;
}
.darkmode-color {
color: #ffffff !important;
}
}
It's hard to answer this without code to test, but that would be what I'd suggest. Source.
It's also recommended to add these meta tags in your <head> tag to ensure that Dark Mode is enabled in your email for users that have Dark Mode turned on.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
I hope this helps!

Django premailer - Removes responsiveness from email template

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>

Fix an html table to a certain size in an email signature

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>

Center align in outlook

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.

Issues with CSS and Links

Looks like you guys were right. Changing the order has fixed the problem. Seems like such an easy fix. Thanks for all the comments/help.
I am having some issues with my links and css. Below is my code for the site. My problem is I have 5 links all using the same class. They all display correctly and the links work fine but the hover and active do not change on the first. The last three work just how they should. Why is this? What is going on? I have deleted it all and re-typed it. I have tried different browsers. Deleted the cache. Nothing.
HTML Code:
<tr bgcolor="#FFFFFF">
<td rowspan="2">
<img src="images/layout/header-menu/menu_02.gif" width="57" height="51" alt=""></td>
<td align="center" height="29">Home</td>
<td rowspan="2">
<img src="images/layout/header-menu/menu_04.gif" width="41" height="51" alt=""></td>
<td align="center" height="29">About</td>
<td rowspan="2">
<img src="images/layout/header-menu/menu_06.gif" width="36" height="51" alt=""></td>
<td align="center" height="29">Products</td>
<td rowspan="2">
<img src="images/layout/header-menu/menu_08.gif" width="36" height="51" alt=""></td>
<td align="center" height="29">Recipes</td>
<td rowspan="2">
<img src="images/layout/header-menu/menu_10.gif" width="36" height="51" alt=""></td>
<td align="center" height="29">Contact</td>
<td rowspan="2">
<img src="images/layout/header-menu/menu_12.gif" width="58" height="51" alt=""></td>
CSS Code:
a.menu:link {
color: #94AA45;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}
a.menu:hover {
color: #713010;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}
a.menu:active {
color: #F9A22E;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}
a.menu:visited {
color: #94AA45;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}

Put your link css in this order:
a
a:visited
a:hover
a:active
For your example, this css should work as expected:
a.menu:link {
color: #94AA45;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}
a.menu:visited {
color: #94AA45;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}
a.menu:hover {
color: #713010;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}
a.menu:active {
color: #F9A22E;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}

Set the visited to appear after link in your CSS.
Way I remember is: *L*o*V*e *HA*te
Tested in my browsers and works when re-arranged. Problem is your visited style is the same as your link style, and overrides the hover (when you are on index.php)

#Artur is right and so is #Guido.
You definitely don't want to use tables for navigation elements.
Here's what I did with your code:
HTML:
<div class="menu">
<td rowspan="2">
<img src="images/layout/header-menu/menu_02.gif" width="57" height="51"
alt="">
</td>
<td align="center" height="29">Home
</td>
<td rowspan="2">
<img src="images/layout/header-menu/menu_04.gif" width="41" height="51"
alt="">
</td>
<td align="center" height="29">About
</td>
<td rowspan="2">
<img src="images/layout/header-menu/menu_06.gif" width="36" height="51"
alt="">
</td>
<td align="center" height="29">Products
</td>
<td rowspan="2">
<img src="images/layout/header-menu/menu_08.gif" width="36" height="51"
alt="">
</td>
<td align="center" height="29">Recipes
</td>
<td rowspan="2">
<img src="images/layout/header-menu/menu_10.gif" width="36" height="51"
alt="">
</td>
<td align="center" height="29">Contact
</td>
<td rowspan="2">
<img src="images/layout/header-menu/menu_12.gif" width="58" height="51"
alt="">
</td>
</div>
CSS:
.menu a {
color: #94AA45;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;
}
.menu a:visited {
color: #94AA45;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;
}
.menu a:hover {
color: #713010;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;
}
.menu a:active {
color: #F9A22E;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;
}
I also made a fiddle for this as well:
http://jsfiddle.net/ultraloveninja/D5rUR/

Resources