Bit of an amateur when it comes to coding ... especially when it comes to e-mail templates. I'm having a hard time getting G-mail to actually hide and display things correctly. I have searched on here and find some answers that I thought would help, but it doesn't seem to fit well in my code. Not worried about the code when being forwarded as of now.
Here is the portion of code with the images specifically. Would love some eyes on it, and some help as well. Everything is in one table, and works fine in a normal browser ... just looking for help in G-mail specifically.
CSS:
#media only screen and (min-width: 480px) {
.mobilechart {
display: none !important;
}
}
#media only screen and (max-width: 480px) {
.desktopchart {
display: none !important;
}
HTML:
<tr>
<td style="background-repeat:no-repeat;background-position:right;" >
<div class="desktopchart">
<img src="https://cdn.maropost.com/pro/uploads/account_415/77640/TC-Email_Template_DESKTOPCHART.jpg" style="width:100%;margin-top:auto;margin-bottom:auto;margin-right:auto;margin-left:auto;" >
</div>
<div class="mobilechart">
<img src="https://cdn.maropost.com/pro/uploads/account_415/77641/TC-Email_Template_MOBILECHART.jpg" style="width:100%;margin-top:auto;margin-bottom:auto;margin-right:auto;margin-left:auto;" >
</div>
</td>
</tr>
Reposting my answer to this question:
The bad news here is that, unfortunately, GMail does not yet support media queries nor does it support the display, overflow or visibility properties.
See Campaign Monitor's CSS Support Guide for Email Clients for more information.
Other than rewriting your newsletter to be completely fluid, rather than trying to make it responsive, I'm afraid there's no real solution to be had here.
Related
I am coding an email, and have created a class for something to be seen on mobile, but not on desktop.
For some reason, Gmail on the desktop is stripping the class.
Does anyone know where I am going wrong? It works on other desktop email platforms.
<style type="text/css">
/* Smartphone Portrait and Landscape */
#media screen and (max-width: 600px) {
.mobileSpacer {
display: block;
}
}
.mobileSpacer {
display: none;
}
</style>
It should work, as Gmail desktop supports <style> blocks. There are certain forms of Gmail that do not support <style> blocks, and these are: Gmail when viewed from a browser on mobile (Gmail webmail on mobile) - as opposed to the Gmail app; Gmail IMAP/POP (e.g. business users using their own domain); Gmail after you've clicked 'view full email' on a long email.
Gmail will also strip a <style> block(s) if you have something in it that it doesn't like: [attribute] and other fancy selectors, spelling/formatting mistakes. Use it's own style block (you can have multiple) to ensure it doesn't remove this one.
Due to this, I would use a mobile-first solution. That is, inline, use what you want for the mobile view. (I can't suggest what you want inline because you don't have the code for that.) The desktops can cope with <style> blocks.
Then use a min-width #media query:
#media screen and (min-width: 600px) {
.mobileSpacer {
display: none;
}
}
Desktops will apply this (except for a rare few very old desktop/webmail platforms - and that's why we cater for the much more popular Gmail).
Outlook for Windows won't apply it, but it has its own special code. You just add mso-hide:all inline:
<td style="mso-hide:all">
I'm really new in coding and I created my first page ever with html and css. The thing is, I'm struggling with making the page responsive.
I know that I have to add the #media query and that, but, once I add it, I don't know which parametres should I change (text, etc) and I can't see how the result would be since I'm using a computer.
I would like a clear explanation or some examples because I've been looking up on Internet and I'm still very confused.
https://codepen.io/jomby/pen/NWvVNpQ
NW vVN p Q
This is the link to my page. In this case, when I see the page on the phone, the text stretches a lot and also the gallery.
Maybe you could tell me how would you make this example responsive so that I can learn that way.
Thank you very much in advance, for your time and patience!
The way you work with Media Queries is by:
Decide what to do first, mobile or desktop
After you do it, start by coding your webpage and once you finish you start adjusting your screensize and see what elements get misconfigured.
Here are some patterns you can follow, however you're not enclosed to configure your settings in these sizes:
#media only screen and (max-width: 1200px){
/*Tablets [601px -> 1200px]*/
}
#media only screen and (max-width: 600px){
/*Big smartphones [426px -> 600px]*/
}
#media only screen and (max-width: 425px){
/*Small smartphones [325px -> 425px]*/
}
I have an HTML banner that is being applied to emails that come in to our environment from an external sender. After testing, it was revealed that the banner blocks a person from previewing a received email on the mobile device. I have zero knowledge of HTML or CSS. What I have is from piecing together from bits here and there. The current articles I am reading are telling me to use the following code:
<style type="text/css">
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileHide { display: none;}}
</style>
I've altered my HTML to this:
<html><head><style type="text/css">
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileHide { display: none;}}
</style></head><body><div class="mobileHide"><table style="border: 1px
solid black;border-collapse: collapse">
<tbody>
<tr bgcolor="#ffac59">
<td>
<small>CAUTION: This is a test.</small>
</td>
</tr>
</tbody></table><h1></h1>
<br />
<mc type="body">
</div></body></html>
Can someone point out what I am doing wrong?
One thing I can see is a typo in your style attribute:
<div class="”mobileHide”">
...has two double-quotes. It should be this:
<div class="mobileHide">
Some desktop email clients also show email preview text, so any solution that removes the header only on mobile clients will leave desktop clients with the same problem you are trying to solve. Instead of targeting mobile clients, it makes more sense to work with the preview text directly.
To get custom preview text on your email, it has to be the first text that appears in your email's body section, even before your header.
From litmus.com:
Preview text is pulled from the first few lines of text found within an email.
So what's happening is that the email client is reading the first few lines of your email to determine what to show as the preview text, but since your header is first, the email's preview text is the gibberish from the header section instead of the marketing speak that you want it to be. The parsing of the email preview as far as I can tell is unaffected by CSS styling such as display: none, though I could be wrong about that.
What Litmus recommends you do is to add an extra, hidden element before your email header (right after the opening body tag) that contains the preview text that you want to show in the email client. You'll want to use this code:
<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
Insert preview text here.
</div>
It's not pretty, but email HTML itself is not pretty. What this does is it makes a hidden element at the top of your email that the client will show as preview text, but that won't actually show to the end user when they open up the email.
In your situation, you might want to pull this preview text programmatically from the incoming email, then apply this element before applying the header.
Does this constitute spam or misleading behavior? Does it hurt your deliverability? Litmus says that it's fine in their experience:
Using hacks like this to hide content occasionally brings up concerns about deliverability. Our experience has been that, used sparingly and alongside an otherwise clean sending reputation, this works quite well.
I know how to use #media to target specific devices based on max-width, like so
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
But is there a quick way to do it based on device, like so
#media screen and (min-width: small) {
body {
background-color: lightgreen;
}
}
#media screen and (min-width: medium) {
body {
background-color: black;
}
}
Yes there is, using a CSS preprocessor, such as Sass, you can do:
$small: 480px;
$medium: 720px;
#media screen and (min-width: $small) {
body {
background-color: lightgreen;
}
}
#media screen and (min-width: $medium) {
body {
background-color: black;
}
}
I saw your question about media queries and I used to think of the same question. However, in my opinion, both fubar and Raptor are correct in their answers.
That said, I would like to point out one method of using media queries that I personally feel may be one of the more versatile methods.
I personally believe that using Google Chrome's developer tools and slowly shrinking the screen size to see when certain aspects of your website either looks awkward, or just plain breaks, taking note of those screen sizes and then writing media queries at those breakpoints may be the best way to have your site look good on the widest variety of screen sizes.
From my own personal experience, once I start concentrating too much on specific device sizes, particularly when it comes to dealing with the different screen sizes of Android vs Apple products, I inevitably had to go down entire product lines to nail the different classes of screen sizes. That makes for code that can become convoluted in a hurry!
I know this answer doesn't have specific code and can be considered more of an opinion than Dev Bible fact, but I strongly feel that the method I described is the one that (especially if you are not too experienced and are not aware of the various classes of mobile device screen sizes/resolutions out there) will yield the most versatile results.
I hope that helps puk. And if you or anybody feels differently or would like to provide a contrary opinion, please feel free to present it. I do not claim to know everything and am always eager to learn new things, methods and points of view!
is there a special html/javascript code that I can use? So I basically have a non mobile optimised website. I want to show a simple one line message to users browsing my website using mobile devices. The message should only show to mobile users.
Your help is greatly appreciated! :)
Thanks
You should look into media queries for CSS. Basically, you can specify a max/min width, then make a class that is only visible on those widths.
For example:
.mobileView {
display: none;
}
#media (max-width: 767px) {
.mobileView {
/* CSS here */
}
}
Please note that you can adjust the width as needed. Here is a quick source to get you started.