I have light and dark mode versions of my logo, with light mode set as the default. When I view my email on iCloud.com's Mail app, the dark mode version of my logo, which is all white, displays. With the white background behind the logo, the logo becomes hidden. I should see the color version of my logo with the white background behind as shown below.
This issue ONLY appears with iCloud.com's Mail app using my laptop/desktop. It does NOT happen in the mobile iOS version (iPhone & iPad), nor does it happen in Gmail and Outlook.
The mso code below is for Outlook, so in my case I'm saying if it's not Outlook, load the div with the "dark-img" class. This is hidden by default until the CSS media query "dark" is preferred by the user. Then I show the white logo (.dark-img) and hide the color logo (.light-img).
#media (prefers-color-scheme: dark) {
/* Shows Dark Mode-Only Content, Like Images */
.dark-img {
display: block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height: inherit !important;
max-width: inherit !important;
line-height: normal !important;
margin-top: 0px !important;
visibility: inherit !important;
}
/* Hides Light Mode-Only Content, Like Images */
.light-img {
display: none !important;
}
}
<img class="light-img" src="https://example.com/content/img/color-logo.png" height="36" alt="" style="text-align: left;margin: 0 auto;padding: 0;-ms-interpolation-mode: bicubic;vertical-align: middle;border: 0;line-height: 100%;width: auto;height: 36px;outline: none;text-decoration: none;"
border="0">
<!--[if !mso]><! -->
<div class="dark-img" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="left">
<img src="https://example.com/content/img/white-logo.png" height="36" alt="" style="text-align: left;margin: 0 auto;padding: 0;-ms-interpolation-mode: bicubic;vertical-align: middle;border: 0;line-height: 100%;width: auto;height: 36px;outline: none;text-decoration: none;"
border="0">
</div>
<!--<![endif]-->
Related
Header not showing up for blackberry work ios and the wrapper isn't being respected for blackberry email. Padding is also not respected in blackberry email for buttons.
I've tried border, align, adding a wrapper div for the weird space after that appears around images. I've given up on responsiveness for those clients but I would like to just look cohesive.
html,
body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. */
table {
border: 0;
border-spacing: 0;
border-collapse: collapse
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */
a {
text-decoration: none;
}
/* What it does: A work-around for email clients automatically linking certain text strings. */
/* iOS */
a[x-apple-data-detectors],
.unstyle-auto-detected-links a,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
u + #body a, /* Gmail */
#MessageViewBody a /* Samsung Mail */
{
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
/* What it does: Prevents Gmail from changing the text color in conversation threads. */
.im {
color: inherit !important;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display:none !important;
}
/* What it does: Removes right gutter in Gmail iOS app. */
/* Create one of these media queries for each additional viewport size you'd like to fix */
.email-container {
width: 100% !important;
}
/* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
#media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
u ~ div .email-container {
min-width: 320px !important;
}
}
/* iPhone 6, 6S, 7, 8, and X */
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
u ~ div .email-container {
min-width: 375px !important;
}
}
/* iPhone 6+, 7+, and 8+ */
#media only screen and (min-device-width: 414px) {
u ~ div .email-container {
min-width: 414px !important;
}
}
</style>
<!-- What it does: Helps DPI scaling in Outlook 2007-2013 -->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!-- CSS Reset : END -->
<!-- Progressive Enhancements : BEGIN -->
<style>
/* What it does: Hover styles for buttons and tags */
.s-btn__primary:hover {
background: #0077CC !important;
border-color: #0077CC !important;
}
.s-btn__white:hover {
background: #EFF0F1 !important;
border-color: #EFF0F1 !important;
}
.s-btn__outlined:hover {
background: rgba(0,119,204,.05) !important;
color: #005999 !important;
}
.s-tag:hover,
.post-tag:hover {
border-color: #cee0ed !important;
background: #cee0ed !important;
}
/* What it does: Styles markdown links that we can't write inline CSS for. */
.has-markdown a,
.has-markdown a:visited {
color: #0077CC !important;
text-decoration: none !important;
}
/* What it does: Styles markdown code blocks that we can't write inline CSS for. */
code {
padding: 1px 5px;
background-color: #EFF0F1;
color: #242729;
font-size: 13px;
line-height: inherit;
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;
}
pre {
margin: 0 0 15px;
line-height: 17px;
background-color: #EFF0F1;
padding: 4px 8px;
border-radius: 3px;
overflow-x: auto;
}
pre code {
margin: 0 0 15px;
padding: 0;
line-height: 17px;
background-color: none;
}
/* What it does: Styles markdown blockquotes that we can't write inline CSS for. */
blockquote {
margin: 0 0 15px;
padding: 4px 10px;
background-color: #FFF8DC;
border-left: 2px solid #ffeb8e;
}
blockquote p {
padding: 4px 0;
margin: 0;
overflow-wrap: break-word;
}
/* What it does: Rounds corners in email clients that support it */
.bar {
border-radius: 5px;
}
.btr {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.bbr {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#media screen and (max-width: 680px) {
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* Hides things in small viewports. */
.hide-on-mobile {
display: none !important;
max-height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
/* What it does: Utility classes to reduce spacing for smaller viewports. */
.sm-p-none {padding: 0 !important;}
.sm-pt-none {padding-top: 0 !important;}
.sm-pb-none {padding-bottom: 0 !important;}
.sm-pr-none {padding-right: 0 !important;}
.sm-pl-none {padding-left: 0 !important;}
.sm-px-none {padding-left: 0 !important; padding-right: 0 !important;}
.sm-py-none {padding-top: 0 !important; padding-bottom: 0 !important;}
.sm-p {padding: 20px !important;}
.sm-pt {padding-top: 20px !important;}
.sm-pb {padding-bottom: 20px !important;}
.sm-pr {padding-right: 20px !important;}
.sm-pl {padding-left: 20px !important;}
.sm-px {padding-left: 20px !important; padding-right: 20px !important;}
.sm-py {padding-top: 20px !important; padding-bottom: 20px !important;}
.sm-mb {margin-bottom: 20px !important;}
/* What it does: Utility classes to kill border radius for smaller viewports. Used mainly on the email's main container(s). */
.bar,
.btr,
.bbr {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
}
</style>
<!-- Progressive Enhancements : END -->
</head>
<!--
The email background color is defined in three places, just below. If you change one, remember to change the others.
1. body tag: for most email clients
2. center tag: for Gmail and Inbox mobile apps and web versions of Gmail, GSuite, Inbox, Yahoo, AOL, Libero, Comcast, freenet, Mail.ru, Orange.fr
3. mso conditional: For Windows 10 Mail
-->
<body width="100%" style="margin: 0; padding: 0 !important; background: #f3f3f5; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #f3f3f5;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f3f3f5;">
<tr>
<td>
<![endif]-->
<!-- Visually Hidden Preview Text : BEGIN -->
<div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
We are committed to being the leading commercial and wealth bank for the private economy in the U.S., working hard every day to help your realize your ambitions. Enhancing our capital markets capabilities for commercial and wealth clients is an important part of being able to deliver excellence for our
</div>
<!-- Visually Hidden Preview Text : END -->
<div class="email-container" style="max-width: 680px; margin: 0 auto;">
<!--[if mso]>
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
<tr>
<td>
<![endif]-->
<table aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 680px;">
<!-----------------------------
EMAIL BODY : BEGIN
------------------------------>
<!-- Primary Email Body : BEGIN -->
<tr>
<td style="padding: 30px; background-color: #ffffff;" class="sm-p btr">
<div dir="rtl" style="display: table; width: 100%; margin: 0 auto; text-align: center; font-size: 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="620">
<tr>
<td align="left" valign="top" width="128">
<![endif]-->
<div style="display: inline-block; margin: 0 -1px; max-width: 680px; min-width:100px; vertical-align: top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<!-- White text : BEGIN -->
<tr>
<td dir="ltr" style="font-family: arial, sans-serif; font-size: 15px; line-height: 140%; color: #fff; text-align: left; padding-right: 0px;">
<p>
We are committed to being the leading commercial and wealth bank for the private economy in the U.S., working hard every day to help your realize your ambitions. Enhancing our capital markets capabilities for commercial and wealth clients is an important part of being able to deliver excellence for our clients every day. Last week, we announced that we have reached an agreement to acquire Cleary Gull<br><br>
</p>
</td>
</tr>
<!-- White text : END -->
<!-- View in Browser : BEGIN -->
<tr>
<td style="padding-bottom: 10px; font-size: 12px; line-height: 15px; font-family: arial, sans-serif; color: #9199A1; text-align: left;">
<a style="color: #9199A1; text-decoration: underline;" href="http://++ViewHTMLCustom++ ">View in browser</a>
</td>
</tr>
<!-- View in Browser : END -->
<!-- Hero Image : BEGIN -->
<tr>
<td>
<a href="https://us.cibc.com/en/commercial.html">
<img src="https://sf-asset-manager.s3.amazonaws.com/96926/7/1524.png" alt="CIBC Connections" border="0" height="" width="100%" style="display: block; font-family: arial, sans-serif; font-size: 15px; line-height: 15px; color: #3C3F44;">
</a>
</td>
</tr>
<!-- Hero Image : END -->
<br>
<tr>
<td dir="ltr" style="font-family: arial, sans-serif; font-size: 15px; line-height: 140%; color: #3C3F44; text-align: left; padding-right: 0px;">
<p style="margin: 0;" class="has-markdown">
<br>
<br>
++FirstName++,<br><br>
We are committed to being the leading commercial and wealth bank for the private economy in the U.S., working hard every day to help your realize your ambitions. Enhancing our capital markets capabilities for commercial and wealth clients is an important part of being able to deliver excellence for our clients every day. Last week, we announced that we have reached an agreement to acquire Cleary Gull, a Milwaukee-based boutique investment banking firm specializing in middle market mergers and acquisitions, private capital placement and debt advisory.
<br>
<br>
Cleary Gull is a well-recognized middle market investment bank. The team has advised on over 200 transactions for clients like you and has expertise in manufacturing, business services, consumer/retail and technology.
<br>
<br>
We expect the transaction to close in the fall. Your relationship manager can answer any questions you have about Cleary Gull or our Capital Markets services for you in the meantime.
<br><br>
</p>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</td>
</tr>
<!-- PRIMARY BODY : END -->
<!-- Clear Spacer : BEGIN -->
<tr>
<td aria-hidden="true" height="10" style="font-size: 0px; line-height: 0px;">
This is email code, hence using tables instead of using lists.
If I change the width of the promo_1-3 to be a fixed number (say 300px) I can get them to align left and right (like the original code at the desktop size) but I can't get them to ignore the originally specified left or right alignment and be centered
#media only screen and ( max-width: 660px) {
table.container { width: 100% !important; }
td.logo img { width:100% !important; }
td.headerimg img{ width: 100% !important; padding: 5px 30px 40px 30px;}
td.promos table.promo_1 { width: 100% !important; }
td.promos table.promo_1 td { padding: 20px 20px 40px 30px; }
td.promos table.promo_2 { width: 100% !important; }
td.promos table.promo_2 td { padding: 20px 0px 40px 30px; }
td.promos table.promo_3 { width: 100% !important; border-top: 1px solid #CAC5C5; }
td.promos table.promo_3 td { padding: 20px 0px 40px 30px; }
Here's the HTML:
<!-- Start story 1 -->
<tr>
<td valign="top" bgcolor="#fff" class="promos" style="padding: 10px 10px 20px 20px; background-color: #fff; font-family: Arial, Helvetica, sans-serif;">
<table class="promo_3" width="300" align="left">
<tr>
<td>
<a target="_blank" href="http://trailrunnermag.com/training/training-plans/1860-what-your-weekly-training-plan-should-look-like">
<img class="promo" alt="Promo image 1" src= "http://media.campaigner.com/media/47/474810/063016ID3.jpg"></a>
<h3 style="font-size:16px;">Promo heading here</h3>
<br><br>
Learn more
</td>
</tr>
</table>
If i understand your question correctly here is the fix:
in your HTML change the line:
<table class="promo_3" width="300" align="left">
to
<table width="300" class="promo_3" align="left">
so it applys the class specified atributes after you set the width.
This makes you table then be 100% wide on a smaller screen.
Then change your css line like this:
td.promos table.promo_3 { width: 100% !important; border-top: 1px solid #CAC5C5; }
to
td.promos table.promo_3 { width: 100% !important; text-align: center; border-top: 1px solid #CAC5C5; }
to align the Content in your table to the center.
Also, if you are using this for an Email, I'd recomend you to not use the H3 because it always gives trouble, since every client interprets it a littble bit different. Instead use a span and apply styles to it.
I am working on a web base app for my school with different versions of CSS for handheld, tablet and desktop. I am using media queries for this. The app is almost done and it works correctly on almost all browsers and android. The app looks awesome on Iphone/Ipad however buttons do not work making the app useless in these devices.
This is what I have:
//Source code
<div id="signinbutton" class="blue_button">Sign In</div>
//desktop.CSS
.blue_button {
width: 130px;
height: auto;
padding: 8px;
margin: 0% auto 20% auto;
background-image:url(../../images/bluebar5.png);
color: #FFF;
text-align: center;
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14pt;
font-weight: bolder;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
cursor: default;
}
.blue_button:hover {
opacity: 0.7;
}
//Handheld.css (this overwrites css on desktop)
.blue_button {
width: 260px;
font-size: 18pt;
background-image:url(../../images/bluebar6.png);
}
I tried applying the style to #signinbutton without success.
You should use a <button> or <input type="button"> tag instead of a div. While the <div> button functionality may work in some browsers, it can be a bit of a hack compared to the traditional button tags
You can wrap your div around <a> like this. It's perfectly valid with html5 now.
<div id="signinbutton" class="blue_button">Sign In</div>
You just need to adjust
Reference:
https://css-tricks.com/snippets/jquery/make-entire-div-clickable/
Try adding to the style of the div {cursor:pointer}.
I have a website (http://ukchina-trading.com/) with the following header:
HTML
<div class='leftImage'>
<img src='image/unionjack.png'>
</div>
<div class='title'>
<h1>J Plus Trading</h1>
<h2>Briding the gap between China and the UK</h2>
</div>
<div class='rightImage'>
<img src='image/chinawings.png'>
</div>
CSS
.title h1 {
font-family: 'Droid Serif', Georgia, Times, serif;
text-align: center;
font-size: 68px;
line-height: 65px;
padding-top: 60px;
margin-bottom: 80px;
}
.title h2 {
font-family: 'Droid Serif', Georgia, Times, serif;
text-align: center;
position:relative;
top:-88px;
left:3px;
font-size: 16px;
color: #FF3300;
}
.rightImage {
position:absolute;
right: 150px;
top: 2px;
}
.leftImage {
position:absolute;
left: 150px;
top: 2px;
}
When the website is view on a computer the header is fine, but when viewed on the iphone screen the images are pushed over the title, hiding it.
What is the best way to redo the header to stop this?
I'd suggest the best thing to do would be to bring the flags inside the 900px width of the website.
Keep them to the left and right of the "J Plus Trading" text but just use floats rather than absolute positioning.
your problem is the absolute positioning you are using, as this causes the images to be in the same position regardless of anything else on the page. instead of absolute try using float:left; and float:right on your left and right images, and this way the text will not be pushed over it. you may have to create extra containing divs with margins or padding so that the images are positioned how you want them
On an e-commerce website that I set-up Link on a page that has 4 alternative product views (they are the 4 small images underneath the add to basket) On an iPhone or iPad the 4th image isn't having its right margin removed so it goes onto the next line.
Basically each images has a 10px right margin, and then the last image that has a class of 'end' has a right margin of '0px !important'.
This works fine in web browsers but on the iPad / iPhone the 0px right margin is not being applied.
I have a feeling this is going to be an easy one but I just can't see it, thanks in advance for any help.
EDIT I have added the code below and have also set-up a stripped down version of the page I am having the problems on: link, it is the 4 small images at the bottom of the right hand side.
Below is the HTML for the images:
<div class="image-additional">
<img alt="" title="" src="larchblue-cr-55x55.jpg" class="thumb ">
<img alt="" title="" src="larchgreen-cr-55x55.jpg" class="thumb ">
<img alt="" title="" src="larchpink-cr-55x55.jpg" class="thumb ">
<img alt="" title="" src="larchyellow-cr-55x55.jpg" class="thumb end">
</div>
And here is the CSS:
.image-additional {
width: 268px;
margin-top: 13px;
clear: both;
position: absolute;
bottom: 0;
overflow: hidden;
}
.image-additional img {
border: 1px solid #E7E7E7;
margin-right: 10px;
}
.image-additional img.end, .image-additional img:last-child {
margin-right: 0px !important;
}
Try using :last-child pseudo element for your mobile targets.
.img:last-child {
margin-right: 0px;
}
Note: It works everywhere except for IE8 and below.