13

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

4 Answers 4

4

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

2
+25

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.

3
  • 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. Aug 13, 2015 at 19:33
  • 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%;} Aug 13, 2015 at 19:39
  • 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. Aug 13, 2015 at 20:29
0

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>

-1

Use tables `

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

`

Its worked for me.

1
  • Your HTML is not well formed. You've opened quotes but haven't closed them. Jun 13, 2018 at 5:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.