[css-d] help with media queries for email

Hi Ron, Might want to check out the site below for some client specific tips and tricks. Used to pull my hair sometimes getting things to work across all clients ( ie desktop, mobile and web based) http://www.emailology.org Outlook doesn't support background images unless you use a Microsoft

Re: [css-d] help with media queries for email...mercy, mercy

Ron, I found this read-up that is quite dated, but I think is still relevant. https://css-tricks.com/using-css-in-html-emails-the-real-story/ HTH, Best, Karl DeSaulniers Design Drumm http://designdrumm.com > On Feb 21, 2017, at 2:11 PM, Tom Livingston wrote: > > I'll also add that what I

Re: [css-d] help with media queries for email...mercy, mercy

I'll also add that what I said below is based on the assumption that you want to reach the widest audience (number of different email clients) as possible. If you know you have a captive audience with a limited email client use (all recipients are using Outlook, for example) then things may be a bi

Re: [css-d] help with media queries for email...mercy, mercy

While it is great that it works for you and you've had success, Karl, I don't really recommend using anything other than tables. At least not until you are proficient in using tables (for email) and getting consistent results with them. I cannot find anything recent regarding html emails without ta

Re: [css-d] help with media queries for email...mercy, mercy

Stay away from tables is my recommendation. Use div or ul instead. Be sure to study up on the display property as you will be needing this understanding to make things look correctly and fit correctly. For background images you could use the background property, or use an img and absolute posi

Re: [css-d] help with media queries for email...mercy, mercy

Using text instead of images IS the right way for download times. Less images the better I've found when loading a webpage. Oh and one other thing regarding the mailing list. Be sure to remember to prune your reply-to. I'm getting double emails each time. ;) Thx. Best, Karl Sent from losPhon

Re: [css-d] help with media queries for email...mercy, mercy

Hi Ron, I usually put width:100%;max-width:600px; for situations where the element will fill the screen up to a certain size and then max it so it stops at the width I desire. And yes, like Tom said, you have to point to something to make it change in your media query. @media ... (...) { #so

Re: [css-d] help with media queries for email...mercy, mercy

Ron, that's the best thing to do. Work thru that tutorial on lynda and you will be getting off on the right foot. Table based emails are much harder to do than conventional html. Good luck. If you're really serious about email, then go to this site and get their newsletter and even join. It's $20

Re: [css-d] help with media queries for email...mercy, mercy

I'd have to *respectfully* disagree with some of the below. For reasons like images being hidden by default in some email clients, I'd recommend using live text as much as possible. Also, I'd recommend sticking with px font-sizing for email client compatibility and getting results that are more li

Re: [css-d] help with media queries for email...mercy, mercy

you’ve all been helpful. it’s been years since i’ve done any coding..so my html probably sucks… but it seems to work. i don’t know why i opted to lay the type over the hero image instead of doing it all in mages…thought it might be “the right way” i’ve found a tutorial on MQs at lynda.com

Re: [css-d] help with media queries for email...mercy, mercy

Hi Ron, I see a lot of issues with your media queries. They need to be target to the classes you've tagged onto your 's. Such as "top" and "header". You should just try to get one thing working at a time, such as the hero area, which will need to turned into an image. Email clients don't consistent

Re: [css-d] help with media queries for email...mercy, mercy

That should be: @media screen and (max-width: 640px) { > table{ width: 320px!important; } > } On Tue, Feb 21, 2017 at 8:47 AM, Tom Livingston wrote: > Ron, > > Looks to me like you closed the MQ before all of the styles, so the > styles are working all the time. Also, it appears you aren'

Re: [css-d] help with media queries for email...mercy, mercy

Ron, Looks to me like you closed the MQ before all of the styles, so the styles are working all the time. Also, it appears you aren't targeting anything and therefore not changing anything. for example: @media screen and (max-width: 640px) { table: width: 320px!important; } Let me know if

Re: [css-d] help with media queries for email...mercy, mercy

karl, http://ricochet.org/plastics_feb20.html i’ve been trying to work with media queries. i think understand the basic concepts, i’ve done some tutorials, rebuilt the html and am still banging my head. i theory, it seems like it shouldn’t be that hard. a wrapper and fixed container. when i a

Re: [css-d] help with media queries for email

Ron, Quick and simple. Google: CSS Media Queries example Download, dissect and learn. GL! Best, Karl DeSaulniers Design Drumm http://designdrumm.com > On Feb 18, 2017, at 7:14 PM, Ron Zisman wrote: > > hi all, > > http://ricochet.org/plastics_engineering.html > > i’m new to email, but

[css-d] help with media queries for email

hi all, http://ricochet.org/plastics_engineering.html i’m new to email, but most of the table coding went ok, but as i’m trying to make it responsive, i need media queries. i understand the concept, but am having trouble with reality. a little direction would be appreciated. thank you in adva