SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Sep 2004
    Location
    Provo, UT
    Posts
    844
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Trouble with responsive html email template

    The following template looks fine when viewed in a web browser. It also looks great when viewed in Mac Mail. But when I view it using Mail on an iPhone, the top gray bar doesn't go all the way to the right like it does on the left. If I change the top header text from "Testimonial Match Alert", to something short like "Test", then the gray header bar will extend all the way to the right of the iPhone screen.

    I've been working on this all day and can't figure out why it's only doing this on the iPhone. Does anyone have any helpful advice?

    Thanks!


    http://test.oil-testimonials.com/too...archMatch.html
    Convert your dollars into silver coins. www.convert2silver.com

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey busboy,

    Sorry I don't know why this is happening and I can't get it to replicate on my end (I don't have the same environments to play with either!). Am I right to assume you're making your CSS inline before testing? Because if not, that would be the first thing to try.

    On an unrelated note, the contrast between the text colour of your connect/contact headings and the background behind is quite low - you might want to darken the grey to help with legibility.

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The problem is the padding on the following element.

    <div class="content">...</div>

    Its extremely bad practise to use <div> elements in emails, instead you should strictly only use a table elements. Also padding does cause white-space issues in emails, you are better off using extra HTML to achieve the spacing required as it will give you a more consistent experience especially in Outlook.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Good point, @chris.upjohn for some reason I didn't even notice the div

    Looking at the styling you've got on that div though might be the key to what you're seeing. You've got your right/left margin set to auto; could it be iPhone's auto margin setting that's the root to your problem?

    Code:
    .content {
    	padding:15px;
    	max-width:600px;
    	margin:0 auto;
    	display:block; 
    }
    Also, not all mail clients render margin. Here's a great link @ronpat shared with me recently, make sure you're covered for the email browsers your readers use: http://www.campaignmonitor.com/css/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •