I am designing a newsletter that currently looks fine in all email clients except Yahoo. I have tried inline styling and CSS in the style tag and in both concurrently. Nothing I do forces yahoo to respect my font/text styling. Everything defaults to cambria and serif instead of the arial, sansserif I want to display. Does anyone know of a workaround? Thank you.
Post some code so we can help you find a solution.
No clue if this is your issue but I'll post it anyway. Yahoo! Mail will render media queries intended for mobile only. If this is your problem, here is your solution:
Replace
<style>
#media only screen and (max-device-width: 480px) {
#mobileWrapper {width:100% !important}
.headerText {font-size:24px !important}
}
</style>
With
<style>
#media only screen and (max-device-width: 480px) {
*[id=mobileWrapper] {width:100% !important}
*[class=headerText] {font-size:24px !important}
}
</style>
Notice the use of [id or class here] rather than your traditional .class or #id. This will force Yahoo! Mail to render your CSS correctly. Hope that makes sense.
add !important; to the end of your font declaration.
Related
I am working with this page http://lifecrypter.io/ and I am using CSS to hide and show elements according to device screen resolution.
Code here:
#media only screen and (max-width: 2000px) {
.one{display:block !important; }
.two{display:none !important;}
.three{display:none !important;}
}
#media only screen and (max-width: 920px) {
.one{display:none !important;}
.two{display:block !important;}
.three{display:none !important;}
}
#media only screen and (max-width: 479px) {
.one{display:none !important;}
.two{display:none !important;}
.three{display:block !important;}
}
I tested de site with Responsinator and aparently it was working fine but then I tested de site with a cellphone and:
The hide and show element properties were not working. I tested with several phones and the result were the same.
Doing several test I found this:
[http://lifecrypter.io/] close the website inside a frameset tag
Testing on mobile device the original site link in S3
Now I can see the hide and show properties are working fine.
I tried to modify the meta tags of the page but
The meta tags show before are the only ones I can modify
There is any way to fix this?
Try adding a viewport meta tag.
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Possible duplicate on this question. #media query not working in mobile. Works fine in Chrome
. Hope it Helps!
I have template for e-mail list, in html + css.
http://tsiskreli.highlander.ge/next.html
Here it is. There is no php, javascript, only html and css everything in this file.
In all browsers (chrome, firefox, explorer) I see it fine, top text is in right place and table looks fine.
My costumer sees it so:
http://s1.postimg.org/7c4iffav3/image004.jpg
I see it so even with 300% zoom:
http://s21.postimg.org/t1jltp0fb/Screenshot_12.jpg
Why my costumer sees this empty space in at the border and why reservation goes down for him?
Because you ask the CSS to do so. Try to view it under 480px screen and you will get the some result as your customer. After inspecting your CSS i found this :
#media only screen and (max-width: 480px){
td[class=mcnImageCardLeftImageContent],td[class=mcnImageCardRightImageContent]{
padding-right:18px !important; /* This is it */
padding-left:18px !important; /* This is it */
padding-bottom:0 !important;
}
This media query is causing the padding :
#media only screen and (max-width: 480px){
td[class=mcnTextContent] {
padding-right: 18px !important;
padding-left: 18px !important;
}
}
Remarks :
Don't duplicate the media query for each property: you can group them all inside one.
Use !important with caution.
Don't use table for layout, and especially not like this: your html structure is a mess.
Consider adding the relevant code in your question by the way.
I have just started bootstraps & i have faced a problem.....!
I have an h1 tag at the top of my site. I design it up and check it out in a browser – looks great. Then I shrink it down to a mobile width, and the font is way too big! Here’s the thinking behind mobile first: how to small the same tag font in a mobile.
Use media queries.
#media (max-width: 480px) {
h1{
font-size: 14px; /* or anything you want */
}
}
Another possibility is to use a JavaScript library for responsive typefaces:
FlowType.js
FitText.js
I've created a page with tables of data that I want to be big enough to view comfortably on the screen but when it goes to print I want it to shrink down to fit on the page but when I change the size of the table, td's and fonts it wont work, the code works in chrome but not the other two browsers.
#media print{
.table6{
page-break-inside: avoid;
min-width: 500px;
max-width: 900px;
}
.table6 td{
font-size: 59.35%;
}
.th7{
max-width: 100px!important;
}
.th8{
max-width: 28px!important;
font-size: 58%;
}
}
The CSS works the print css works but only on certain elements and using certain attributes like display: none to hide navigation links etc.
According to http://caniuse.com/#feat=css-mediaqueries, CSS3 media queries are supported as of IE9 and Firefox 23.0
whatever you need to check compatability for, i highly suggest:
http://caniuse.com/css-mediaqueries
hope that helps
Solved the issue, when changing the width inside of #media print{} it can't override the values which exist in the regular css which is suitable for the screen, even when !important is called on it so I put the css for my table inside #media screen{} and it worked.
So if anyone has this issue with changing widths heights or size in general when printing in other browsers make sure your css is split up into #media print{} and #media screen{} otherwise it wont work in IE or Firefox.
(EDIT)
In firefox also if you want something to appear on the screen one way and print another you MUST have your styles for on the screen in #media screen{} if you leave it in the normal css print styles will never override the regular css. For example I had this inside the normal css but it was ignored in firefox when printing
.table6{
float: left;
}
So I had to put it like this
#media screen{
.table6{
float: left;
}
}
hi i'm creating an enewsletter and am trying to resize it for when its viewd on a mobile i have it working on iphone but android i'm unsure as to how to resize because of the massive screen variants. heres what ive got so far.
so in my i have too added things that overide the style if the screen width is a certain size.
#media only screen and (max-device-width: 320px) {
.hide { display: none !important; }
#main_content, #inner_content, .mobwidth { width: 300px !important; }
#content_rows, .mobwidthtext {width:300px !important;}
.banner {height:94px !important;}
.top {height:67px !important;}
.footer {height:109px !important;}
}
#media only screen and (max-device-width: 400px) {
.hide { display: none !important; }
#main_content, #inner_content, .mobwidth { width: 400px !important; }
#content_rows, .mobwidthtext {width:380px !important;}
.banner {height:117px !important;}
.top {height:83px !important;}
.footer {height:136px !important;}
}
Most email clients ignore CSS declarations that are not inline. Embedded stylesheets are ignored as well. Media queries will not work because they would override those made by web-based email clients, such as Gmail (i.e. what you want to do will not work).
Email HTML standards are pretty brain-dead. Keep in mind that things like MS Outlook don't even use browser technology to view emails - they use the MS Word engine.
Here's a good guide as to what CSS features can be used in emails:
http://www.campaignmonitor.com/css/
I disagree with the above answer. Using media queries for mobile will most definitely work but for android set your max screen size to 480. make sure to keep !important on all styles set by the query and ensure you have a general layout in your inline styles. this will result in browser stripping the css in head and just using the inline. Then the mobiles (majority of which do not strip head) using your media queries, I would recommend a large amount of testing before a send. But the only issue you have atm is just finding the correct maxwidths as you have to take into account the portrait and landscape widths as well. While also considering that zoom can also set off meia Queries with some devices