CODEWITHSUNDEEP
htmlioscssemail
preahkumpii
preahkumpii

Reputation: 1301

iPhone Mail resizing images/div in html email

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>

Screenshot from iPhone Mail

Upvotes: 13

Views: 6928

Answers (4)

Candice Lehman
Candice Lehman

Reputation: 1

If you use the table with nested div approach you should fix the inline style syntax.

<table>
  <tr>
    <td>
      <div style="width:100%; max-width: 600px">
        <img src="url/file.jpg" alt="image description" />
      </div>
    </td>
  </tr>
</table>

Upvotes: 0

SHIVAPUTRA UDAGATTI
SHIVAPUTRA UDAGATTI

Reputation: 154

Use tables `

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

`

Its worked for me.

Upvotes: -1

preahkumpii
preahkumpii

Reputation: 1301

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.

enter image description here

Upvotes: 4

Source Code
Source Code

Reputation: 288

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.

Upvotes: 2

Related Questions