iPhone Mail resizing images/div in html email

iphone email rendering issues
iphone email formatting problems

I'm using MadMimi for email promotions. So far, my emails look consistent across all browsers and devices, including iOS on iPad (in the Mail app). There is, however, a weird resizing issue with images on iOS on the iPhone (again, the Mail app). See the CSS and screenshot below. As you can see, the image bursts out of the width of its parent element. Does anyone know why this happens or how to correct it? Thanks.

CSS:

.outer-wrapper {
     width: 600px;
     max-width: 100%;
     margin: 0 auto;
}
.inner-wrapper {
     width: 100%;
     border-radius: 10px;
     overflow: hidden;
     background-color: white;
     border: 1px solid #dddddd;
}
img {
     width: 600px;
     max-width: 100%;
     height: auto;
}

HTML:

<body>
   <div class="outer-wrapper">  
      <div class="browser">Email look weird? Be sure to enable images, or view it on the web <a href="[[web_link]]" target="_blank">here</a>.</div>
      <div class="inner-wrapper">
         <a href="#"><img src="http://pintsizedtreasures.com/newsletters/header-2.jpg"></a>
         <div class="body-wrapper">
            [content...]
         </div>
      </div>
   </div>
</body>

I found the answer by trial and error. I had reversed the values for .outer-wrapper max-width and width. The correct CSS should read:

.outer-wrapper {
     width: 100%;
     max-width: 600px;
     margin: 0 auto;
}

What I think is happening is that when the user is on an iPhone, there is less than 600 pixels in the viewport, so the renderer is falling back to max-width for .outer-wrapper. And since it is set to 100% and not a declared pixel value, the img 100% width is falling back to the viewport width, not its parent width. All other browsers have a viewport larger than 600px, which is a declared pixel value, and the problem doesn't occur (iPad, desktop, etc.). Stupid oversight of mine, apparently.

This is how it's supposed to look.

ios - iPhone Mail resizing images/div in html email, I found the answer by trial and error. I had reversed the values for .outer-wrapper max-width and width . The correct CSS should read: .outer-wrapper { width:  NOTE: This article explains how to deploy an HTML email signature with images on a single iPhone device. To learn how to manage HTML email signatures on multiple iPhones connected to Office 365 or Microsoft Exchange accounts, consult this guide.

Since the image states 100% it will take up the whole width. If you want it to be the same width as the letter you should move it inside that div tag. I'm assuming it is not since I can not see the html code.

If you have a specific css section for different devices you can change it there. Or another option is to create a css class just for this ios device and edit the width there so you will not change the rest of the working devices.

Emails on iPhone 7 not scaling properly > Litmus, I had to combine two email codes for a project I'm working on. off the code and now the preview for my iphone 7 is not scaling properly. 1</title> <link href="​http://email.equinoxfunds.com/images/favicon/EF_favicon- ExternalClass * { line-height: 100%; } div, p, a, li, td { -webkit-text-size-adjust:none; }  A Fix for Outlook Image Issues in HTML Email Campaigns Outlook issues for HTML emails. The few addressing image resizing, properties and wrapping the second image in a div that would hide

Use tables `

<table>
        <tr>  
          <td>
             <div style="width=100%">
                 ...your content 
             </div>
          </td>
        </tr>
     </table>

`

Its worked for me.

How to Design and Develop Email for iPhones, Re-size and re-use the same image (better for overall file size). <style type=“text/​css”> @media only screen and (max-device-width:480px; ) { Yes I know we can download photos to laptop and resize them and email How can I reduce the size of photos for emailing purposes? - iPhone, iPad, iPod Forums at iMore.com Two for one: Get an iPhone SE w/ Mint Mobile service for $30 a month

Dealing with Content Images in Email, It can be a little tricky actually, because the HTML for images that works on But we don't have either CSS or JavaScript available to us in emails. Which does not support GMail apps on iOS or Android, which is unfortunate. I am hearing good things about Mail Chimp and believe the cost is a little less. 2. The iPhone may resize your email based on the largest element. Check out an example of this problem below. In this instance, a table structure forces all the elements to become proportionally smaller. The image at the top is 600px wide and has a smaller table cell below it.

A Fix for Outlook Image Issues in HTML Email Campaigns, We produce an HTML email newsletter once a month that has a readership of over 8000 people. The few addressing image resizing, though well-written and promising, didn't work for me. Outlook doesn't like max-width and min-width CSS values, even if inline. Addressing the iOS Address Bar in 100vh Layouts. I had to combine two email codes for a project I'm working on. While doing this and trying to erase any unused CSS, I somehow knocked off the code and now the preview for my iphone 7 is not scaling properly.

How do I keep Apple Mail from resizing images in my HTML , HTML signatures in Apple Mail are a nightmare, Mail adds all sorts of strange markup to your HTML and its not easy to get at the actual HTML it outputs. You can  Sizing screen to fit Android or IPhone [Answered] RSS. and if you have a div (image, etc) which is wider than the viewport set the CSS for that element to.

Comments
  • I added HTML. I understand that the 100% width of the image will fill its parent, which is not the body, but a div, which also has a parent.
  • why don't you put inner-wrapper inside the body wrapper so it can take that parents width? Or like I said before you can make css class to pick up when it is in an ios device so it can have a different width for ios devices. For example @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio: 2) { width: 80%;}
  • I didn't put the inner wrapper inside the body wrapper because the image is the header image, and the content is separate from that image. The content also has images in it. The body wrapper would also have margins, etc. Besides all this, the central question remains, why the images don't behave on iPhone like they do in every other client.
  • Your HTML is not well formed. You've opened quotes but haven't closed them.