Re: Email Template - Need help with button/ no button option for module

HP · ‎05-17-2022

I hope I am not making this more difficult by piecemealing the info! It is the opposite of my intent but I'm afraid it is. If this isn't what you need below, I can drop the whole thing in.

Ok, not sure if you need this part:

  <meta class="mktoImg" id="hero2BackgroundImage" mktoname="Background Image" default="https://resources.marketsource.com/rs/271-FIF-072/images/2022-Email-700x345.jpeg" mktomodulescope="true" /> 
    <meta class="mktoColor" id="hero2BackgroundColor" mktoname="Module Background" default="#0195D3" mktomodulescope="true" />

Then this:

 <!-- Other Meta Tags --> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> 
    <meta name="robots" content="noindex,nofollow" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700" rel="stylesheet" type="text/css" /> 
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type="text/css" /> 
    <!--[if mso]>
		<style type='text/css'>
		.primary-font {
		font-family: Arial, sans-serif !important;
		}
		</style>
		<![endif]--> 
    <!--[if mso]>
		<style type='text/css'>
		.secondary-font {
		font-family: Arial, sans-serif !important;
		}
		</style>
		<![endif]--> 
    <style>
			/*startcommon*/
			@media only screen and (max-width: 700px) {
				table.m_boxing{
					width: 100% !important;
				}
			}
			/*endcommon*/
		</style> 
    <style media="all">
/* CLIENT-SPECIFIC STYLES */
#outlook a {
  padding: 0;
}
/* Force Outlook to provide a "view in browser" message */
.ReadMsgBody {
  width: 100%;
}
.ExternalClass {
  width: 100%;
}
/* Force Hotmail to display emails at full width */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
  line-height: 100%;
}
/* Force Hotmail to display normal line spacing */
/* iOS BLUE LINKS */
.appleBody a {
  color: .m_000;
  text-decoration: none;
}
.appleFooter a {
  color: .m_000;
  text-decoration: none;
}
@-ms-viewport { 
    width: device-width; 
}

</style> 
    <style media="all">
@media only screen and (max-width: 640px) {

/*starttablet*/

	.mktoVideoThumbnail{
		width: 100% !important;
		height: auto!important;
		max-height:inherit!important;
		min-height:inherit!important;
	}

body {
	width: auto !important;
}

table.table600{
	width: 450px !important;
}

table.table-inner{
	width: 86% !important;
}

table.table1-2{
	width: 47% !important;
	clear: both;
}

table.table1-3{
	width: 29.4% !important;
}

table.table1-4{
	width: 100% !important;
	text-align: left !important;
}

table.table2-3{
	width: 64% !important;
	text-align: center !important;
}

table.table3-3{
	width: 100% !important;
	text-align: center !important;
	clear: both;
}

table.footer-logo{
	width: 10% !important;
	text-align: right !important;
}

td.outer{
	min-width: 0 !important;
}

td.stack{
	padding-bottom: 40px !important;
}

.stack-tablet {
	padding-bottom: 20px !important;
	overflow: visible !important;
	float: none !important;
	mso-hide: none !important;
	display: block !important;
}

img.mobile-img{
	width: 100% !important;
	height: auto !important;
}

td.center-tablet{
	text-align: center !important;
}

td.hide-tablet{
	display: none !important;
}

table.footer-column{
	width: 47% !important;
	text-align: left !important;
}

.m_header td.center-tablet img {
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}

.m_header td a {
	margin-top: 0px !important;
}

.m_header .social {
	text-align: center !important;
}

.m_subhead .text {
	text-align: center !important;
}

.m_team .spacer {
	width: 26px;
}

.m_two-articles .table1-2 {
	width: 100% !important;
}

.m_two-articles img {
	width: 100% !important;
	height: auto;
}

.m_two-articles .stack-tablet {
	height: 40px;
}

.m_photo-l .table1-3,
.m_photo-r .table1-3 {
	width: 100% !important;
	clear: both;
}

.m_photo-l .table2-3,
.m_photo-r .table2-3 {
	width: 100% !important;
	clear: both;
}

.m_photo-l img,
.m_photo-r img {
	width: 100% !important;
	height: auto;
}

.m_contacts .table1-3 {
	width: 100% !important;
	clear: both;
}

.m_footer .table1-2 {
	width: 100% !important;
	clear: both;
}

.m_footer .text,
.m_footer .unsub {
	text-align: center !important;
}

.m_header2 .social {
	text-align: center !important;
}

.m_header2 .table1-3 {
	width: 100% !important;
	clear: both;
}

.m_header2 .cta table {
	float: none !important;
	margin-top: 0 !important;
	margin-right: auto !important;
	margin-bottom: 0 !important;
	margin-left: auto !important;
}

.m_half .table600,
.m_half2 .table600 {
	width: 100% !important;
}

.m_half .table1-2,
.m_half2 .table1-2 {
	width: 100% !important;
}

.m_half .inner,
.m_half2 .inner {
	padding-top: 60px !important;
	padding-right: 60px !important;
	padding-bottom: 60px !important;
	padding-left: 60px !important;
}

.m_three-products .spacer,
.m_three-products2 .spacer,
.m_features .spacer {
	width: 26px;
}

.m_three-products img,
.m_three-products2 img {
	width: 132px !important;
	height: auto !important;
}

.m_hero2 .background {
	background-size: cover !important;
}

.m_two-products .table1-2 {
	width: 100% !important;
}

.m_two-products img {
	width: 450px !important;
	height: auto !important;
}

.m_two-products .stack-tablet {
	padding-bottom: 60px;
}

.m_coupon td {
	text-align: center !important;
}

.m_clients .padding-y {
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 20px;
	padding-left: 0;
}

.m_clients a {
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}

.m_features2 .spacer {
	width: 26px;
}

.m_devices .table1-2,
.m_mainfeature .table1-2,
.m_two-articles2 .table1-2 {
	width: 100% !important;
	clear: both;
}

.m_mainfeature .photo img {
	width: 100% !important;
}

.m_mainfeature .full-width {
	width: 360px !important;
}

/*endtablet*/

}

@media only screen and (max-width: 479px) {

/*startmobile*/

body {
	width: auto !important;
}

table.table600{
	width: 290px !important;
}

table.table-inner{
	width: 80% !important;
	float: none !important;
}

table.table1-2{
	width: 100% !important;
	clear: both;
}

table.table1-3{
	width: 100% !important;
	clear: both;
}

table.table1-4{
	width: 100% !important;
	text-align: center !important;
}

table.table2-3{
	width: 100% !important;
	text-align: center !important;
}

table.table3-3{
	width: 100% !important;
	text-align: center !important;
	clear: both;
}

table.footer-logo{
	width: 60% !important;
	text-align: center !important;
}

td.outer{
	min-width: 0 !important;
}

td.td3-1{
	width: 60% !important;
	text-align: center !important;
}

.stack-smartphone {
	padding-bottom: 20px !important;
	overflow: visible !important;
	float: none !important;
	display: block !important;
	mso-hide: none !important;
}

td.center-smartphone{
	text-align: center !important;
}

img.mobile-img{
	width: 100% !important;
}

td.center-tablet{
	text-align: center !important;
}

td.hide-smartphone{
	display: none !important;
}

table.footer-column{
	width: 100% !important;
	text-align: center !important;
}

.m_header .social {
	text-align: center !important;
}

.m_header td.center-tablet img {
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}

.m_header td a {
	margin-top: 0px !important;
}

.m_half .table600,
.m_half2 .table600 {
	width: 100% !important;
}

.m_half .table1-2,
.m_half2 .table1-2 {
	width: 100% !important;
}

.m_half .inner,
.m_half2 .inner {
	padding-top: 0 !important;
	padding-right: 40px !important;
	padding-bottom: 40px !important;
	padding-left: 40px !important;
}

.m_two-products img,
.m_three-products img,
.m_three-products2 img {
	width: 290px !important;
	height: auto !important;
}

.m_hero2 .background {
	background-size: cover !important;
}

.m_coupon td {
	text-align: center !important;
}

.m_clients a {
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}

.m_mainfeature .full-width {
	width: 215px !important;
}

/*endmobile*/

}

Jo_Pitts1 · ‎05-17-2022

Sorry - next key question.. how do you want it to render on mobile?

HP · ‎05-17-2022

Ok, that's a great question because up until you asked it, my thinking was that I would want it to "shrink" down so you would see the full image on mobile. But as I picture that in my mind, that would make it much more narrow and would throw off the heading and CTA button (when used) - both of which are working responsively.

SO is it possible to have it not appear at all for mobile? Just the background (that I have set to one of our brand colors) and the headline/button? (Kinda like this when email images are blocked until downloaded? But just not have it there at all?)

Jo_Pitts1 · ‎05-17-2022

That's easy enough.

In your mobile responsive section of the CSS create a class something like this:

@media only screen and (max-width: 479px) {

/*startmobile*/

body {
	width: auto !important;
}

.mNoBackground {
  background-image: none !important;
}
etc
etc
etc

and in this line

<td class="background" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;margin-left: auto;vertical-align: middle;margin-top: 0;margin-right: auto;margin-bottom: 0;background-image:${hero2BackgroundImage};background-repeat: no-repeat;background-position: center 
center;background:${hero2BackgroundImage};background-color:${hero2BackgroundColor};border-collapse: collapse;" background="${hero2BackgroundImage}" bgcolor="${hero2BackgroundColor}" valign="middle">

add that mNoBackground in as a style like this:

<td class="background mNoBackground" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;margin-left: auto;vertical-align: middle;margin-top: 0;margin-right: auto;margin-bottom: 0;background-image:${hero2BackgroundImage};background-repeat: no-repeat;background-position: center 
center;background:${hero2BackgroundImage};background-color:${hero2BackgroundColor};border-collapse: collapse;" background="${hero2BackgroundImage}" bgcolor="${hero2BackgroundColor}" valign="middle">

I've not had a chance to test, but that should get you close.

HP · ‎05-20-2022

It works like a charm!

Once again, you are amazing!! (And kind!)