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
King
Level: Powered On

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
123 Views
0 Kudos
Reply
1 ACCEPTED SOLUTION

Accepted Solutions
CollabTechie
CollabTechie
Level 8

Re: How to apply CSS to EMAIL

‎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
102 Views
Reply
1 REPLY 1
CollabTechie
CollabTechie
Level 8

Re: How to apply CSS to EMAIL

‎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
103 Views
Reply

Helpful resources

Announcements
firstImage

Power Platform Online Conference

Speakers, submit your sessions now! Call for speakers ends Feb. 10!

firstImage

New & Improved Power Automate Community Cookbook

We've updated and improved the layout and uploading format of the Power Automate Cookbook!

thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

firstImage

Incoming: New and improved badges!

We've given our badges an overhaul and also added some brand new ones!

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

sixthImage

Power Platform World Tour

Find out where you can attend!

seventhimage

Webinars & Video Gallery

Watch & learn from the Power Automate Community Video Gallery!

View All
Top Kudoed Authors (Last 30 Days)
View All
Users online (3,392)