Text within table cells on email appears to be shrinking on Windows Phone devices

Can anyone help me understand why Windows Phone reduces the font size when text is placed within a table cell that isn't at 100% width or nested?

Below is a screenshot of a test email template I'm working on. When I sent it to a Windows Phone 8.1 device (SDK emulator image), the issue I mentioned was clearly visible:

All other tables with text at 100% width display normal font sizes, but for the results table which is not at 100% and includes nesting, the font size becomes very small. Despite trying various solutions, I can't seem to get it to render in its intended size.

This problem only occurs with an EAS (Exchange ActiveSync) based mailbox, such as Exchange, because the rendering engine differs from POP3/IMAP accounts.

Things I've attempted that haven't worked include:

  • Using viewport meta tag
  • Adding a font tag with size attribute
  • Using -ms-text-size-adjust:none;

I have checked similar posts on Stack Overflow regarding this issue, but none of the suggestions seems to work in my case. Below is the code I'm working on and what leads to the behavior described above:

https://raw.githubusercontent.com/jamesmacwhite/email-client-testing/master/email-rendering-test.html

Any advice would be appreciated!

htmlcsswindows-phonehtml-emailemail-templates

Answer №1

Through extensive experimentation with various table layout methods, I have determined that the issue lies in tables using fixed width in pixels. By utilizing percentages instead, the email is rendered correctly.

For more information, visit:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Substituting Div containers with elements imported from external files

Imagine I have <div> <div id="stuff"> <!-- stuff --> </div> </div> Could I move the content of <div id="stuff"> into a separate file named stuff.html, and then replace the code above with something simi ...

htmlangularjs

Unable to select dropdown button in Python while using Selenium

My goal is to click on the "Project" element in order to display a dropdown list (as shown in the image below). When using the selenium library in Python, I encountered the following error: could not be scrolled into view This error was triggered by code ...

pythonhtmlseleniumfirefoxbutton

The page fails to load when redirected, however, it briefly displays the page upon clicking the back button before navigating back to the previous page

Currently, I am working with Angular 2 and encountering an issue when attempting to click on a link. The loading bar continues to progress without displaying the data or HTML content on the page. Furthermore, if I try to go back to the previous page, the i ...

htmlangular

The following divs are adjacent to each other, with their widths set in percentages, and the paddings

I successfully transformed divs into a column of tables. However, now I am looking to add some padding between the divs. When I attempt to do so like this: <div style="float:left; width:100%;"> <?php foreach ($datas as $rec) { ?> <div ...

csshtml

Is there a way to alter the styling of a React element without resorting to querySelector?

Just diving into React and I'm faced with a challenge - how to update the CSS of a class based on a condition. let customizeColumn = document.querySelector(".main-table-body"); !expandFilter ? customizeColumn.setAttribute("style", ...

cssreactjsmaterial-ui

Update the input type on the fly

Hey there, I've got a bit of an unusual question. I'm looking to create a form with fields that vary for each user, like a text input or a checkbox. I attempted using Angular to achieve this: <div ng-controller="myCtrl" ng-repeat="x in prova" ...

javascripthtmlangularjs

Grid of domes, fluid contained within fixed structures and beyond

I've been grappling with this issue for a while now, and have had to rely on jQuery workarounds. I'm curious if there is a way to achieve this using CSS or LESS (possibly with javascript mixins). The page in question consists of both fixed and f ...

javascripthtmlcssgridless

Save JSON data in an HTML document or vice versa

Hey there, the title of this post might seem a bit unclear but I couldn't think of another way to phrase it. So here's the dilemma: I have some data that is JSON encoded and stored in a .json file: {"foo":"bar", "bar":"foo", "far":"boo"} Additi ...

javascriptjqueryjsonhtmlelectron

Injecting navigation bar onto an HTML page using jQuery

After being a dedicated user of ASP, I have made the decision to switch to a Linux-based server for my website. However, as I begin to build my site, I am facing challenges that were once simple in ASP - such as loading a constant navigation bar. My objec ...

jqueryhtml

Send data from a PHP form with various input types using JavaScript and AJAX

I need to submit a form with various fields, including multiples checkboxes selection and some hidden input fields via AJAX and then replace the HTML content with the response. I decided to use JavaScript/AJAX for this process, but did I make any mistakes? ...

phpjqueryhtmlmysqlajax

What is the best way to improve the design of this division that includes buttons?

I'm having trouble with the layout of three divs I have set up. One acts as a container, while the other two are meant to hold buttons. However, something seems off and I can't figure out how to correct it. .button { display: inline-block; ...

htmlcss

Having trouble getting the on:dblclick event to trigger on a row within a list using S

I am currently using Sveltestrap and I am in need of a double click handler for a row: <ListGroupItem on:dblclick={handler(params)}> <Row> <Col><Icon name=........</Col> ... </Row> </ListGroupItem> Int ...

javascripthtmlonclicksvelte

What is the best way to enable a DOM element's height to be resized?

I have a widget displayed in the corner of my browser that I would like to make resizable by dragging the header upwards to increase its height. The widget's position remains fixed with its bottom, left, and right properties unchanged, but I need the ...

javascripthtmlcssresizablejquery-resizable

Eliminate any HTML content using Jsoup while retaining the text lines

I am working with a String that contains e-mail content, and my goal is to eliminate all HTML coding from this String. This is the current code I have: public static String html2text(String html) { Document document = Jsoup.parse(html); document = ...

javahtmlregexjsoup

How can PHP be used to display a varying number of items in a slider depending on the size of the screen?

I am currently utilizing media queries to adjust the layout of my website. My query is: How can I display a different number of items in a slider based on the screen size? For small screens, I have included the following code: <?php if($i == 4) {echo ...

phpcss

Toggle jQuery to hide a div and update its CSS styling

There is an anchor with the class of "hide-btn1" that I want to trigger a series of actions when clicked: The rcol-content should hide and the text should change from Hide to Show The #container width needs to increase to 2038px The table.status-table wi ...

javascriptjqueryhtmlcss

Responsive breakpoints in TailwindCSS seem to have an issue with applying padding and margin styles properly

Currently, I am tackling a project that involves creating a responsive design with Tailwind CSS on nuxtjs. Has anyone encountered the issue of py-8 applying to both breakpoints? If so, please share your insights! Here is how I have structured the compone ...

cssvue.jsnuxt.jstailwind-css

The background is set and the vertical scrolling overflow is enabled

My website has an image set as the background, with a fixed position and overflow-y to allow scrolling. However, I have encountered an issue where the height of the image is causing problems on certain displays and resolutions. To temporarily fix this pro ...

htmlcssbackgroundscreen-resolution

Steps for including a path to a base64 encoded image

I am currently facing a challenge in embedding images into my emails where I need to encode them using an online tool. The issue I am encountering is that the email template I am using has a dynamic URL, with ${loginurl}/images as the path to my image. H ...

javascripthtmlhtml-email

Clicking the set button in Jquery mobile datebox resets the time

I am experimenting with the jquery mobile datebox (courtesy of Jtsage) to select time and date. Unfortunately, every time I reset the time by clicking the set button, I am unable to retrieve the correct time. Below are my code snippets: $.extend($.jtsag ...

javascriptjqueryhtmljquery-mobiledatebox