I know most email clients are not fans of media queries but they do support them in a limited format.
All I am trying to do is alter the font size on one link .
<style type="text/css">
.link {color: rgb(133, 16, 16); font-size: 24px;}
#media only screen and (max-width: 420px) {
.link {font-size: 14px !important;}
}
</style>
DOWNLOAD
It works fine in a browser but not when emailed. Can anyone see anything i'm missing?
You need to inline styles generally, because some email clients do not support <style> blocks.
Not sure what client/version/device you are using but that code can work on some.
However, consider inlining mobile-first, because that will cover Gmail IMAP, and then using min-width to cover the desktops. You'll also need something for Outlook Windows, since that doesn't accept <style> blocks, so here I'm using "mso-ansi-font-size" and that will take precedence over font-size for them.
This worked across all main emails:
<head> <!-- I needed to put a little bit of structure -->
<style type="text/css">
#media only screen and (min-width: 420px) { <!-- Note this is for desktops -->
.link {font-size: 24px !important;}
}
</style>
</head>
<body>
DOWNLOAD <!-- Note inlined; and Outlook alternative -->
</body>
If you do need to consider some really old desktop ISPs, some of which do not support <style> blocks, they will show the mobile version (14px). There is no way around it. But I prefer that than a desktop-first approach, because there are usually very few if any people on my lists that use old desktop ISPs, but a lot of people use Gmail IMAP (business accounts, typically).
For more on choosing mobile-first vs desktop-first approach for email, see https://htmlemailprinciples.com/third-precedent-of-practicality
Related
I know to use media queries and anchor pseudo classes I need to place them in the head of an email rather than inlining the styles (impossible).
Does it make any difference with the plethora of email clients out there is the styles are written in the head like so:
<style>
body {
....
}
</style>
Or linked like so:
<link rel="stylesheet" type="text/css" href="http://example.com/mystyle.css">
Do not rely on external (<link rel="stylesheet">) or embedded style sheets (those contained within the <style> tag outside the <body> tag), these are the most important thing to avoid. **
Many email services cut everything above the body tag and disable
external style sheets.
It's best to use <style> tag inside <body>
<body>
<style type="text/css">
body {
....
}
#media only screen and (max-width: 600px) {
....
}
</style>
</body>
If you want more details you can refer to this link, It was quite helpful for me, Cheers...
Best is for style to be written in the document and not linked. Linked resources are blocked by webmail clients like Outlook.com, Yahoo and Gmail
Use this guide for style support of email clients:
https://www.campaignmonitor.com/css/
I need to build a responsive email template. I did my research and learnt that media queries are not widely supported by the email clients.
So, I tried not to use media query and stacked the columns using display: inline-block; max-width:290px;.
But what if I want to change the font size for mobile version? Also I have a case where client wants few blocks to be visible in mobile but not on desktop. How can I achieve these without media query?
Also, in my case when I add style rules and media queries, I guess iOS supports media queries. But rues under media queries are not appearing but the other rules defines in <style></style> works just fine.
The template looks somewhat like this:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
table {
font-size: 24px;
}
#tdtoshowinmobile {
display: none;
}
#media only screen and max-device-width(767px){
table {
font-size: 32px !important;
}
#tdtoshowinmobile {
display: block !important;
}
}
</style>
</head>
<body>
<table>
...tr...td....
</table>
</body>
The above template adds the normal rules to inline elements but removes the media queries in my case. I read an article that says that mail clients remove style tags and add it to inline elements. And I guess since media queries can't be defined inline they are being ignored.
So, again my questions are:
how to change font-size or color etc in responsive email template without using media queries?
how to add media queries the right way?(For me adding them in style tag is not working)
1 Think it can be done only using media query.
Some popular mobile mail clients support media query, so in my opinion it's worth.
2 Hope this code can help you
#media screen and (max-device-width: 767px),
screen and (max-width: 767px) {
}
also, maybe use some doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If you lookin for responsive email example with multiple columns please take a look at litmus or other free templates ( this one looks really good as example )
I'm new to this and not really understand why is this happening and how to solve this.
I'm building my web-site with #media queries to be mobile-friendly. When I'm accessing the site from mobile I see the mobile-friendly version as I should, but when I'm trying to switch for desktop-view, the mobile-friendly version is remained and the desktop(normal) isn't showing.
With my *.css file I did as following:
my styles for global(normal - desktop) view
...
...
...
#media (max-width:500px){
my styles for mobile-friendly view
}
I don't want to use #media for my desktop view as not all browsers support #media, just in case some one will think it may solve this problem.
Hope for your help
Always ensure you include the following <meta> tag within your <head> </head> element:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
The viewport tag is used to serve your website in a certain style regardless of device. The width property controls the size of the viewport (the virtual "window") and can be set to a specific pixel size, or the width of the device. The initial-scale property controls the zoom level when the page is loaded. maximum-scale, minimum-scale, and user-scalable all control how users are allowed to zoom the page in out out.
I personally have disabled user-scalable to keep a consistent page view, like when a user focuses on a select element it ensures the page does not zoom. Let me know if this fixes your problem, otherwise I will need some example of your CSS to figure out your problem! Cheers ~
The only browsers that do not support media queries are IE 5 to 8. IE 9+ supports it. Less than 1% of my website views come from an Internet Explorer browser, so in my opinion I would not sacrifice a good design for IE. I would recommend to always code mobile first, and after implement size specifications.
Implementing the viewport in the head section of your page is a must.
<meta name="viewport" content="width=device-width, initial-scale=1">
I wouldn't use a max-width:500px since this is a random max width... Stick to the correct ones, and your CSS will look like this:
*-- SINCE WE ARE CODING MOBILE-FIRST, WE DO NOT NEED A MEDIA QUERY FOR IT --*/
Enter all base code here
/*-- TABLET --*/
#media(min-width: 641px) {
...
}
/*-- SMALL DESKTOP --*/
#media(min-width: 768px) {
...
}
/*-- DESKTOP --*/
#media(min-width: 992px) {
...
}
/*-- BIG DESKTOP (rarely used, but can be useful) --*/
#media(min-width: 1280px) {
...
}
Coding mobile-first CSS will simplify your code and create a solid style base. Switching your habits to mobile-first coding will be a plus for you and the designers that may eventually need to work with your layouts. This should be considered an effective method to help create bulletproof responsive designs.
I've just discovered CSS #media queries and I think they're great! However, I know that not all browsers support them (namely all but the most recent versions of I.E.).
What should I do then, in my default stylesheet? Should I target a normal-sized screen? Should I go route of lowest-common-denominator and load the mobile stylesheet? Or should I make the design completely fluid?
What is generally a good plan when making the default stylesheet for browsers that don't support #media queries?
It depends on whether you go with de 'mobile first' approach or 'desktop first'.
The desktop first should not cause any trouble with desktop browsers not supporting #media, because they will just ignore the mobile stylesheet rules, like they should. The only problem is mobile browsers that don't support media queries. They will render the page like seen on desktop. But most smartphones support media queries, except pre-win7 phones. The question is if you want to support those phones.
You stylesheet should look something like this.
body {
width: 960px;
margin: 0 auto;
}
#media only screen and (max-width: 500px) {
/* override desktop rules to accommodate small screens*/
body{
width: auto;
margin: 0;
}
The other approach is mobile first. You create a base stylesheet for mobile, and then use mediaqueries to spice thinks up for desktop users. You can put the desktop rules in a separate file, and use media queries and conditional comments to load it in modern desktop browsers and IE. But here the problem is IE mobile also supports conditional comments, so no pre-win7 phone support. Your html should look something like:
<link rel="stylesheet" href="/css/basic.css" />
<link rel="stylesheet" href="/css/desktop.css" media="all and (min-width: 500px)" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/desktop.css" />
<![endif]-->
Making your design fluid will help a lot. The aim is that no matter what screen size, your site will always look good. Just resize your window to try it out. Fluid designs can't make your sidebar move to the bottom if the screen is to narrow. For this you need mediaqueries.
Good luck
I'm working on an HTML email and have been running to a problem on the mail client on the iPad only.
It seems that setting inline CSS to "font-size: 12px" or any other size does not work on the mail app for iPad, despite the font-size displaying correctly in the Mail app for Mac OS X.
Any ideas?
Webkit automatically adjusts font-sizes on the ipad for easy reading. This CSS fixes the problem:
-webkit-text-size-adjust: none;
The WebKit layout engine automatically adjusts font-sizes.
As of this post, Webkit is commonly used in Safari, Chrome, Kindle and Palm Browsers.
Applications can also take advantage of WebKit.
The problem comes down to minimum 'font-size: 13px;'
A CSS work-around:
<style type="text/css">
div, p, a, li, td { -webkit-text-size-adjust:none; }
</style>
One issue is when creating e-Mail Signatures, for tags may be over-written or stripped.
Please Note that inline WebKit Styling will be stripped out of Gmail's Web Client.
Does it support composing styled text? (i.e., bold, italics, font sizes)
No (confirmed), aside from any formatting carried over by copy-and-paste from Safari or other apps. (It definitely supports displaying HTML/rich text messages.)
http://www.macintouch.com/reviews/ipad/faq.html
<head>
<style type="text/css">
<!--
/*
I began with the goal to prevent font scaling in Landscape orientation.
To do this, see: http://stackoverflow.com/questions/2710764/
Later, I just wanted to magnify font-size for the iPad, leaving
the iPhone rendering to the css code. So ...
(max-device-width:480px) = iphone.css
(min-device-width:481px) and
(max-device-width:1024px) and
(orientation:portrait) = ipad-portrait.css
(min-device-width:481px) and
(max-device-width:1024px) and
(orientation:landscape) = ipad-landscape.css
(min-device-width:1025px) = ipad-landscape.css
*/
#media only screen and (min-device-width: 481px)
{
html {
-webkit-text-size-adjust: 140%;
}
}
-->
</style>
</head>