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 positioning with z-index. Also, set your CSS inline with the style attribute. Don't link style sheets and read up on baseurl. Just my 2¢ Built a lot of HTML emails in my day and these tips work for me. HTH, Best, Karl Sent from losPhone > On Feb 21, 2017, at 9:12 AM, Rod Castello <rodcastel...@gmail.com> wrote: > > 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 / month, but you get to talk to real > email marketing professionals and ask questions. > http://www.onlyinfluencers.com/ > > Rod Castello > >> On Tue, Feb 21, 2017 at 6:52 AM, Ron Zisman <ronzis...@mac.com> wrote: >> >> 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…hopefully that will help. >> >> and i thought tables would be easy.. >> >> rgds, >> ron >> >> On Feb 21, 2017, at 9:45 AM, Rod Castello <rodcastel...@gmail.com> wrote: >> >> 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 <td>'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 >> consistently support background images, especially with live text over >> them. >> Take the headline" ANTEC 2017, subhead and date and merge with the >> background image and create a "hero image". >> Then just try and set that up in a table using an absolute url for the >> image. Give the image width as 100%. If needed you can create multiple >> hero images if the text looks too small when reduced to "320px" on small >> screens. Then you show an hide those when appropriate with your MQ's. >> For the copy, try using "em" sizes instead of "px" sizing and they will >> resize automatically when the screen size is reduced. You can use "px" but >> will probably need to use different sizing at your various break points. >> >> I would offer more help with examples of code, but need to get to work. >> >> Rod Castello >> >> >> On Tue, Feb 21, 2017 at 5:25 AM, Ron Zisman <ronzis...@mac.com> wrote: >> >> 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 apply the query, it goes liquid and won’t hold the 600 >> measure. >> >> sorry to be so dense, but i’m going nuts—i’m done a few tutorial from >> litmus .no <http://litmus.no/> luck. i was hoping to get an extremely >> simple example. >> >> >> most of the examples i’ve seen have a ton of resets and queries—its a >> blur. its not from not trying. —thanks again, >> >> ron >> >> On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers <k...@designdrumm.com> >> >> wrote: >> >> >> 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 <ronzis...@mac.com> wrote: >> >> 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 advance, >> —ron >> ______________________________________________________________________ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> >> >> ______________________________________________________________________ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> >> >> ______________________________________________________________________ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> >> >> >> >> >> -- >> Rod Castello >> DIGITAL DESIGN AND DEVELOPMENT >> 818.437.7880 <(818)%20437-7880> >> rodcastel...@gmail.com >> www.smashcube.com >> ______________________________________________________________________ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> >> >> > > > -- > Rod Castello > DIGITAL DESIGN AND DEVELOPMENT > 818.437.7880 > rodcastel...@gmail.com > www.smashcube.com > ______________________________________________________________________ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
