I've been trying a bunch of different things to solve this, but nothing has made any difference. In our emails, we have an image in the footer. It is 456px wide, which is wider than both the device width and the parent div/ table (I've tried both).
This is in Gmail, testing on Chrome emulating iPhone 5/SE. The image has a max-width of 100% on it, but Gmail Mobile seems to remove this and insert a max-width of 852px, which is useless.
Might anyone know what the workaround is?
The css attribute max-width only has partial support in Android.
https://www.campaignmonitor.com/css/box-model/max-width/
Without posting your html code, it's kind of hard to look at what you are doing and suggest an alternative.
Another question: Why in the world are you building emails that are 852px?
The best practice for email width is 600-800px. Beyond 600px, your email will not display correctly in many email clients, if for no other reason than that's the width of the viewing window for the email. Any wider than 600px, the recipient will have to scroll to view the email. As an example:
Gmail: 640px (starts hiding background color)
Outlook 2007: 600px
Outlook 2013: 550px
Yahoo: 650px
Good luck.
Related
Got an issue I've been trying to solve without much luck for a while across various projects.
I've got some divs with text inside that is centered with CSS using display: block and line-height. I also tried with padding and a fixed height. Typically, these are setup as either just headers, or sometimes buttons.
Either way, I always seem to have an offset on the top from vertical center in the mobile safari browser that I don't get in ANY web browser (it's perfectly vertically aligned in a desktop browser). I can alter the setting to center in the mobile browser, but this throws out all the other browsers and this is a responsive design.
Has anyone experienced this issue?
I've got -webkit-text-size-adjust: 100%; but that doesn't seem to be related to this issue.
So far my hack work around is to have devices only css which sets a different line-height, but as you can imagine, that's a horrible solution.
This article has some great information on many different options for centering content when you don't know anything about the widths and heights:
http://css-tricks.com/centering-in-the-unknown/
It builds on from user1002464's answer quite well.
you can use display:table-cell and vertical-align:middle for the div containing the text
I'm having a massive issue with something seemingly simple. I have a HTML email that I am creating. There is a section containing a row of images, some of them with links. Outlook keeps putting a single pixel horizontal space between the first image and the second. I had them in table cells, but even with the images simply in a row in the same table I still have the same issue.
The HTML source can be viewed here, where it looks fine in a browser - but copy and paste into outlook 2010 or 2007 results in the problem.
http://cogentec.co.uk/redbar/bar2.html
Well it seems that although Outlook's compose view shows gaps between the images, once the email has been sent, it looks fine at the receiving end. Even if the recipient is the very same Outlook client that displayed the email incorrectly in compose view.
Solved.
Your images all need display:block;. ALWAYS use this in email unless you are floating images (which is rare)
I'm having an issue with Outlook and when Windows Display (Control Panel > All Control Panel Items > Display) is set to Medium - 125% (or larger)
The text in the newsletter appears bigger and is creating issues with spacing. Although most of the issues with this can be resolved, I would like to know if there is a way to force Outlook to respect the pixel sizing as defined in the html email.
An example code block is something on these lines
...
<td width="460" valign="baseline">
<p style="font-size:16px;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;" >Hello </p>
</td>
...
The text inside the <p> tag is 16px on a machine that has Windows Display 100% but is larger when Windows Display 125% (interestingly, the browser still respects the 16px and does not increase the font size like Outlook)
I don't think you're taking the right approach to this problem. Please look at it another way.
The user said "I want my text to be bigger". They probably said that because they have a very high res display or they have visual difficulties. It's their preference, if not their need, to have bigger text.
You're saying "how do I override the user's preference for my cosmetic convenience?".
Don't do that. Fix your layout's design so it adapts better to varying text sizes.
Reduce your image use and/or place your images so that they can handle being pushed around by the text. Consdier using scalable units like em or percentage font sizes to be more friendly toward people with visual difficulties or very-high-res displays.
Background:
The reason Windows scales fonts (and pixels) like this is because software developers for the platform have been consistently ignoring the font sizes the user sets in Explorer and the theme. Apps often force the use of their own fonts with specific pixel sizing instead of using the system fonts and sizes.
This has led to lots of apps that're unusable for people with visual difficulties, on media PCs, etc.
Microsoft wanted to give users a way to override these badly behaved programs, so they gave users a way to scale the pixel sizes provided by applications by a fixed percentage. Essentially they redefined a font "px" as an abstract unit that can be scaled.
Your HTML email is trying to be one of those badly behaved programs.
I coded this html email and when I check it in Chrome and IE7 the photo of the women is broken up. It looks fine in all other browsers. In some email clients it is also broken up.
Anyone experience this before and or can offer a suggestion on how to fix?
thank you,
ryan
Your image "sandy-portrait2.png" is stretching your upper table with beyond 600px wide to 638px wide.
Adjust your bottom table to match and you should be good. Also, you will need to recut or manually position "below-bottom-a-line.png" because it is only 600px wide and will not align correctly with the image in your upper table.
Also take note that since you are using background attribute on you table, Client such as Outlook 2007 will ignore this attribute and not display the background.
I have a mobile site which I'm testing on the iPhone, and unlike most other sites, I'm not able to hold my finger on the screen to get the 'copy' menu to appear (with the draggable handles to select an area to copy). Nothing happens at all on my site.
I've tried adding the following to my style sheet but it hasn't made any difference:
-webkit-user-select: text;
I should also state that I have the following also in my style sheet and within the page head:
-webkit-text-size-adjust: none;
I've got these as I didn't want the content to be scalable, and just wanted the content to span 100% of the device width.
Would the implementation of any of the above be causing the lack of selectable text on the site? Out of interest, I tried the flickr mobile website which also is not scalable and uses 100% of the device width like my site, and that also doesn't seem to come up with the draggable/select area for copying when you hold your finger on some text.
Does anyone have any idea why this is or how I can make the text content (or any content actually) selectable for copying/pasting?
Thanks
are there any elements that may be obscuring the items by overlaying them, etc? a z-indexing issue, perhaps?