cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Reply
King
Helper IV
Helper IV

How to apply CSS to EMAIL

‎11-06-2019 08:32 AM

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

Message 1 of 2
221 Views
0 Kudos
Reply
1 ACCEPTED SOLUTION

Accepted Solutions
CollabTechie
Responsive Resident
Responsive Resident

‎11-06-2019 09:54 AM

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

Message 2 of 2
200 Views
Reply
1 REPLY 1
CollabTechie
Responsive Resident
Responsive Resident

‎11-06-2019 09:54 AM

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

Message 2 of 2
201 Views
Reply

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

Power Platform ISV Studio

Power Platform ISV Studio

ISV Studio is designed to become the go-to Power Platform destination for ISV’s to monitor & manage published applications.

View All
Users online (12,875)