cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
King
Advocate III
Advocate III

How to apply CSS to EMAIL

what am I doing wrong?

in the email

I will show a bit of how I want to apply CSS

 

<div class='container'>
<div class='phone' style="
width: 300px;
height: 600px;
background: #0000;
background: -webkit-linear-gradient(top,#000e3b 0,#00377b 100%);
border-radius: 2.5rem;
border: 1rem solid;
box-shadow: 0px 0px 100px rgba(0,0,0,0.2);
margin: auto;
overflow: hidden;
padding: .25rem;
">
<div class='phone-head' style="
display: flex;
margin-bottom: 1rem;
flex-direction: row;
background-color: transparent;
">
<div class='phone-head--item' style="
width: 33%;
color: white;
padding: 0 .75rem;
align-items: center;
justify-content: center
">
<i class="fa fa-arrow-left"></i>
</div>
<div class='phone-head--item'>
<h6 style="
color:#ffff;
margin-top: 1rem;
text-align: center;
">My Tickets</h6>
</div>

the result is:

download.png

 

The result I hope is:

download (1).png

1 ACCEPTED SOLUTION

Accepted Solutions
CollabTechie
Responsive Resident
Responsive Resident

Here's an example of what I use for HTML e-mails...

 

<head>
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>New Deal Action Tracker</title>
    <style>
 
    @media only screen and (max-width: 620px) {
      table[class=body] h1 {
        font-size: 28px !important;
        margin-bottom: 10px !important;
      }
      table[class=body] p,
            table[class=body] ul,
            table[class=body] ol,
            table[class=body] td,
            table[class=body] span,
            table[class=body] a {
        font-size: 16px !important;
      }
      table[class=body] .wrapper,
            table[class=body] .article {
        padding: 10px !important;
      }
      table[class=body] .content {
        padding: 0 !important;
      }
      table[class=body] .container {
        padding: 0 !important;
        width: 100% !important;
      }
      table[class=body] .main {
        border-left-width: 0 !important;
        border-radius: 0 !important;
        border-right-width: 0 !important;
      }
      table[class=body] .btn table {
        width: 100% !important;
      }
      table[class=body] .btn a {
        width: 100% !important;
      }
      table[class=body] .img-responsive {
        height: auto !important;
        max-width: 100% !important;
        width: auto !important;
      }
    }
    /* -------------------------------------
        PRESERVE THESE STYLES IN THE HEAD
    ------------------------------------- */
    @media all {
      .ExternalClass {
        width: 100%;
      }
      .ExternalClass,
            .ExternalClass p,
            .ExternalClass span,
            .ExternalClass font,
            .ExternalClass td,
            .ExternalClass div {
        line-height: 100%;
      }
      .apple-link a {
        color: inherit !important;
        font-family: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
        text-decoration: none !important;
      }
      .btn-primary table td:hover {
        background-color: #34495e !important;
      }
      .btn-primary a:hover {
        background-color: #34495e !important;
        border-color: #34495e !important;
      }
    }
    
      .Severity-Low {
	
	background-color:#f1f7ce;
	font-weight: 900 ;
	text-align: center;
	padding-top: 10px ;
	padding-bottom: 10px ;
	color: grey ;
	
	}
	
	  .Severity-Medium {
	
	background-color:#fff1cc;
	font-weight: 900 ;
	text-align: center;
	padding-top: 10px ;
	padding-bottom: 10px ;
	color: grey ;

	}
	
	 .Severity-High {
	
	background-color:#facfd3;
	font-weight: 900 ;
	text-align: center;
	padding-top: 10px ;
	padding-bottom: 10px ;
	color: grey ;

	}

	
	.Header {
	
	background-color:#616265 ;
	font-weight: 900 ;
	text-align: center;
	padding-top: 20px ;
	padding-bottom: 20px ;
	color: white ;
font-size: 175%;
	 

	 
}   
 
  .Button {
	
	background-color:#3876b7;
	font-weight: 900 ;
	text-align: center;
	padding-top: 10px ;
	padding-bottom: 10px ;
	color: white ;

	}

 
    </style>
  </head>

<html>
  <body class="" style="background-color: #f6f6f6; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;">
      <tr>
        <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
		&nbsp;</td>
        <td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;">
          <div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;">

            <!-- START CENTERED WHITE CONTAINER -->
            <span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;"></span>
            <table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 3px;">

              <!-- START MAIN CONTENT AREA -->
              <tr>
                <td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;">
                  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tr>
                      <td class="Header">
                        Test</td>
                    </tr>
                    <tr>
                      <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
                        <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;"></br>
                            <p>H</p>
						<strong> 
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            <!-- END MAIN CONTENT AREA -->
            </table>
            <!-- START FOOTER -->
            <div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%; text-transform: uppercase">
              <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
                <tr>
                  <td class="Button" style="border-bottom: 2px white solid">
                    <a href="@{items('Apply_to_each_3')?['{Link}']}" style="color: white; text-decoration: none;">Open the action</a></td>
                </tr>
                </table>
            </div>
            <!-- END FOOTER -->

          <!-- END CENTERED WHITE CONTAINER -->
          </div>
        </td>
        <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
		&nbsp;</td>
      </tr>
    </table>
  </body>
</html>

View solution in original post

1 REPLY 1
CollabTechie
Responsive Resident
Responsive Resident

Here's an example of what I use for HTML e-mails...

 

<head>
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>New Deal Action Tracker</title>
    <style>
 
    @media only screen and (max-width: 620px) {
      table[class=body] h1 {
        font-size: 28px !important;
        margin-bottom: 10px !important;
      }
      table[class=body] p,
            table[class=body] ul,
            table[class=body] ol,
            table[class=body] td,
            table[class=body] span,
            table[class=body] a {
        font-size: 16px !important;
      }
      table[class=body] .wrapper,
            table[class=body] .article {
        padding: 10px !important;
      }
      table[class=body] .content {
        padding: 0 !important;
      }
      table[class=body] .container {
        padding: 0 !important;
        width: 100% !important;
      }
      table[class=body] .main {
        border-left-width: 0 !important;
        border-radius: 0 !important;
        border-right-width: 0 !important;
      }
      table[class=body] .btn table {
        width: 100% !important;
      }
      table[class=body] .btn a {
        width: 100% !important;
      }
      table[class=body] .img-responsive {
        height: auto !important;
        max-width: 100% !important;
        width: auto !important;
      }
    }
    /* -------------------------------------
        PRESERVE THESE STYLES IN THE HEAD
    ------------------------------------- */
    @media all {
      .ExternalClass {
        width: 100%;
      }
      .ExternalClass,
            .ExternalClass p,
            .ExternalClass span,
            .ExternalClass font,
            .ExternalClass td,
            .ExternalClass div {
        line-height: 100%;
      }
      .apple-link a {
        color: inherit !important;
        font-family: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
        text-decoration: none !important;
      }
      .btn-primary table td:hover {
        background-color: #34495e !important;
      }
      .btn-primary a:hover {
        background-color: #34495e !important;
        border-color: #34495e !important;
      }
    }
    
      .Severity-Low {
	
	background-color:#f1f7ce;
	font-weight: 900 ;
	text-align: center;
	padding-top: 10px ;
	padding-bottom: 10px ;
	color: grey ;
	
	}
	
	  .Severity-Medium {
	
	background-color:#fff1cc;
	font-weight: 900 ;
	text-align: center;
	padding-top: 10px ;
	padding-bottom: 10px ;
	color: grey ;

	}
	
	 .Severity-High {
	
	background-color:#facfd3;
	font-weight: 900 ;
	text-align: center;
	padding-top: 10px ;
	padding-bottom: 10px ;
	color: grey ;

	}

	
	.Header {
	
	background-color:#616265 ;
	font-weight: 900 ;
	text-align: center;
	padding-top: 20px ;
	padding-bottom: 20px ;
	color: white ;
font-size: 175%;
	 

	 
}   
 
  .Button {
	
	background-color:#3876b7;
	font-weight: 900 ;
	text-align: center;
	padding-top: 10px ;
	padding-bottom: 10px ;
	color: white ;

	}

 
    </style>
  </head>

<html>
  <body class="" style="background-color: #f6f6f6; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;">
      <tr>
        <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
		&nbsp;</td>
        <td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;">
          <div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;">

            <!-- START CENTERED WHITE CONTAINER -->
            <span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;"></span>
            <table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 3px;">

              <!-- START MAIN CONTENT AREA -->
              <tr>
                <td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;">
                  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tr>
                      <td class="Header">
                        Test</td>
                    </tr>
                    <tr>
                      <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
                        <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;"></br>
                            <p>H</p>
						<strong> 
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            <!-- END MAIN CONTENT AREA -->
            </table>
            <!-- START FOOTER -->
            <div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%; text-transform: uppercase">
              <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
                <tr>
                  <td class="Button" style="border-bottom: 2px white solid">
                    <a href="@{items('Apply_to_each_3')?['{Link}']}" style="color: white; text-decoration: none;">Open the action</a></td>
                </tr>
                </table>
            </div>
            <!-- END FOOTER -->

          <!-- END CENTERED WHITE CONTAINER -->
          </div>
        </td>
        <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
		&nbsp;</td>
      </tr>
    </table>
  </body>
</html>

View solution in original post

Helpful resources

Announcements
Process Advisor

Introducing Process Advisor

Check out the new Process Advisor community forum board!

MPA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Users online (12,233)