CODEWITHSUNDEEP
iphonehtmlcssioshtml-email
Brenden
Brenden

Reputation: 8754

Image size reduction in iOS Mail

I'm creating an HTML mail template for an app, and the template includes a 440px wide image.

When i look at it on my iphone, it goes beyond the width of the screen. I've seen plenty of times when iOS Mail shrinks the size of the email to fit everything in (for instance, emails from Apple).

Any ideas on what I might be doing wrong? The image CSS and it's container CSS is:

.photo {
    width: 400px;
    height: 460px;
    padding: 20px;
    background: #fff;
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}
.photo img.main-photo {
    max-width: 400px;
}
.photo div.caption {
    width: 400px;
    position: absolute;
    bottom: 20px;
    font-family: 'Indie Flower';
    height: 50px;
    font-size: 20px;
}

and the actual HTML is

<div class="photo">
    <img src="{{ photo.images.standard_resolution.url }}" class="main-photo" />
    <div class="caption">
        {{ photo.caption.text }}
    </div>
</div>

UPDATE: Here is an example of how it looks. I dont want it to stretch beyond the screen

enter image description here

Upvotes: 1

Views: 3039

Answers (2)

Walter Cameron
Walter Cameron

Reputation: 2383

400px is too wide, the non-retina iPhone's are 320px wide. If Mail is like Mobile Safari, it'll even treat it the iPhone 4 as 320px wide. Have you tried smaller sizes?

Upvotes: 0

Luuk
Luuk

Reputation: 1999

try to delete the width and only use max-width. I think that would solve your problem.

Upvotes: 4

Related Questions