Adjusting the full width TD media query for HTML emails on iPhone is not functioning properly

I'm encountering an issue with implementing a media query for an HTML email to display correctly on iPhones. Here is a screenshot showing the problem:

Upon testing on Android, the footer aligns properly, but on iPhone it doesn't stack as intended. Here is the code snippet for the footer section:

    @media (max-width:480px) {
    .footerGrid{
        display: inline-block !important;
        font-size: 25px !important;
        width: 100% !important;
        padding: 20px 0 20px 0;
    }

    .line{
        display: none !important;
    }

    .responseFooter{
        width: 100% !important;
    }

    .footerGrid img {
        width: 25px !important;
    }
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-spacing: 0"> 
    <tbody> 
        <tr> 
            <td valign="top" align="center" style="padding: 0px" bgcolor=#000000> 
            <!--[if mso]> <table border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;"> <![endif]--> 
                <div style="min-width: 50px; min-height: 20px;width:100%; display: inline-block; text-align: center; vertical-align:top"> 
                    <table cellspacing="0" cellpadding="0" border="0"> 
                        <tbody> 
                            <tr> 
                                <td valign="top" align="center" style="padding:10px 10px"> 
                                    <div itm-edit="myedittext8" itm-footer="true"> 
                                        <table class="responseFooter" style="width: 575px;" width="100%"> 
                                            <tbody> 
                                                    <tr align="center"> 
                                                    <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 37px;">Home</td> 
                                                    <td class="footerGrid line" style="width: 8px; color: white;">|</td> 
                                                    <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 54px;">Locations</td> 
                                                    <td class="footerGrid line" style="width: 8px; color: white;">|</td> 
                                                    <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 33px;">Menu</td> 
                                                    <td class="footerGrid line" style="width: 9px; color: white;">|</td> 
                                                    <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 23px;"><a href="#" style="color: white; text-decoration: none;font-family: arial;"><img src="image.png"></a></td> 
                                                    <td class="footerGrid line" style="width: 9px; color: white;">|</td> 
                                                    <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 19px;"><a href="#" style="color: white; text-decoration: none;font-family: arial;"><img src="image2.png"></a></td> 
                                                    <td class="footerGrid line" style="width: 3px; color: white;">|</td> 
                                                    <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 17px;"><a href="#" style="color: white; text-decoration: none;font-family: arial;"><img src="image3/png"></a></td> 
                                                    <td class="footerGrid line" style="width: 5px; color: white;">|</td> 
                                                    <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 72px;">Guest Feedback</td> 
                                                    <td class="footerGrid line" style="width: 6px; color: white;">|</td> 
                                                    <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 46px;">Gift Cards</td> 
                                                    <td class="footerGrid line" style="width: 4px; color: white;">|</td> 
                                                    <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 97px;">Update Your Account</td> 
                                                    <td class="footerGrid line" style="width: 7px; color: white;">|</td> 
                                                    <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 55px;">Unsubscribe</td> 
                                                </tr> 
                                            </tbody> 
                                        </table> 
                                    </div>
                                </td> 
                            </tr> 
                        </tbody> 
                    </table> 
                </div> 
            <!--[if mso]> </td></tr></table> <![endif]--> </td> 
        </tr> 
    </tbody> 
   </table>

In the iPhone view, all the text elements are cramped together and appear vertically stacked with each letter in every word.

Your assistance in resolving this issue would be greatly appreciated!

htmlcssemailhtml-emailacid

Answer №1

I ran the code through litmus and browserstack without any issues. Could you please take a look at the modified code below to see if it works for you?

The changes include adding meta tags and adjusting the media query.

Modified Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="pm-thumbnail-browser-dimensions" content="600x775" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Test</title>
  <style type="text/css">
    @media only screen and (max-width:480px) {
      .footerGrid {
        display: inline-block !important;
        font-size: 25px !important;
        width: 100% !important;
        padding: 20px 0 20px 0;
      }
      .line {
        display: none !important;
      }
      .responseFooter {
        width: 100% !important;
      }
      .footerGrid img {
        width: 25px !important;
      }
    }
  </style>

</head>

<body class="mobile">
  <table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-spacing: 0">
    <tbody>
      <tr>
        <td valign="top" align="center" style="padding: 0px" bgcolor=#000000>
          <!--[if mso]> <table border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;"> <![endif]-->
          <div style="min-width: 50px; min-height: 20px;width:100%; display: inline-block; text-align: center; vertical-align:top">
            <table cellspacing="0" cellpadding="0" border="0">
              <tbody>
                <tr>
                  <td valign="top" align="center" style="padding:10px 10px">
                    <div itm-edit="myedittext8" itm-footer="true">
                      <table class="responseFooter" style="width: 575px;" width="100%">
                        <tbody>
                          <tr align="center">
                            <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 37px;">Home</td>
                            <td class="footerGrid line" style="width: 8px; color: white;">|</td>
                            // More table rows here...
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <!--[if mso]> </td></tr></table> <![endif]-->
        </td>
      </tr>
    </tbody>
  </table>

Please review these screenshots:

Screenshot 1

Screenshot 2

Screenshot 3

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

Apply CSS styling to the v-html output

I am trying to enhance the style of HTML code using a v-html but have been struggling with finding a working solution so far. Can anyone help me out? :( Below is my code snippet: Template : <div class="para" v-html="value" /> Script : exp ...

htmlcssvue.jssassvuejs2

The content of the modal box is determined by the custom field

I need your help with displaying different content in a modal box using featherlight.js. The idea is simple: If there is an image, it should display the image. If not, it should show a SoundCloud URL iframe. But for some reason, it's not working as e ...

phphtmllightboxadvanced-custom-fieldsfeatherlight.js

What sets SVG and CSS3 animations apart and where do they overlap?

Sencha Animator relies on CSS3 animations as its primary animation tool. RaphaelJS, on the other hand, favors SVG animations for its visual effects. I'm curious about the parallels and distinctions between SVG and CSS3 animations. Is either one a s ...

csssvg

Monitoring page transitions in single-page applications using JavaScript

Has anyone found a method to keep track of "page" changes on single-page applications? I grasp the idea of a one-page app where all the html/css is loaded in advance and pages are created by showing and hiding elements as needed. Despite being technically ...

javascriptjqueryhtmlangularjsember.js

Creating a rhombus or parallelogram on a canvas can be easily achieved by following these simple

I'm new to working with the canvas element and I want to create some shapes on it. Can someone provide me with guidance on how to draw a Rhombus or Parallelogram on a canvas? Something similar to what is shown in this image: https://i.stack.imgur.c ...

javascripthtmlcanvas

How can I locate specific images within a CSS sprite?

Are you searching for the correct process to pinpoint specific image locations within an image sprite? If, for example, you aim to create 10 div images in your header using the image provided below, how can you determine the exact location of each one? Is ...

css

Continuously slide the client's logo from right to left in an endless loop

I have implemented the following code to create an infinite slider for my client's logo. The slider moves from right to left and I am using jQuery to add duplicate slides to ensure the loop continues seamlessly. However, I am facing a particular issu ...

javascripthtmljquerycsscss-animations

Troubleshooting SCSS Compilation Problems in Vue.JS

I am currently working on a vue.js web application and I want to incorporate SCSS. To do this, I have installed npm i node-sass sass-loader. Additionally, I have created a vue.config.js file at the root level of my project: module.exports = { css: { ...

cssvue.jssass

Use PHP to dynamically adjust the number of form instances and then save them all as CSV files

Currently, I am developing a PHP script that will allow users to open an existing CSV file (referred to as the template) on a webpage. Users can then populate editable text fields with its data anywhere between 1 and 50 times, depending on their needs. Onc ...

phphtmlcsv

Retrieve the content inside a div element with HtmlAgilityPack

I am attempting to extract the content from a div using HtmlAgilityPack. Here is an example of my htmlcode structure: https://i.sstatic.net/3JzBb.png The specific content I am trying to retrieve is located within the news_content_container div class, as ...

c#html.nethtml-parsinghtml-agility-pack

"Emphasize menu items with an underline as you navigate through the

I am using Gatsby with React and have a navigation menu with links. I would like to make it so that when a link is clicked, a border bottom appears to indicate the current page, rather than only on hover. <ul className="men" id="menu"> ...

javascripthtmlcssreactjsgatsby

The input field displays Spanish text incorrectly when a certain value is set

I am experiencing an issue when trying to enter Spanish text into an input field, as it does not display properly. Strangely, the same text appears correctly when placed inside a div or when already set as the value for the input field. HTML <div>C ...

javascriptjqueryhtml

Tips for animating the box-shadow effect using jQuery

Can anyone provide insight on how to animate the box-shadow of multiple elements? I have reviewed previous threads such as this one, but found outdated and non-working solutions. Additionally, I came across the jquery box-animation plugin, which is limit ...

jqueryjquery-animatecss

Retrieve the identifier of the parent li element

We have an HTML structure shown below. A jQuery function is triggered when the click me link is clicked. Is it possible to retrieve the id of the enclosing li element from this function? If yes, how can this be achieved? <ul> <li id="20"> &l ...

javascriptjqueryhtml

What is the best way to paste plain text into a Textarea without any formatting?

A challenge I am facing in my project is related to copying and pasting text into a Textarea. When a user copies text, the style of the text is also inserted along with it. However, when the user manually types the text, it gets inserted correctly without ...

htmlcssreactjs

Is it possible for me to create personalized color definitions that I can seamlessly use across CSS, JavaScript, and HTML files?

I'm currently using a shade of blue throughout my app, and I find myself repeatedly copying and pasting the color code in my CSS styles. Is there a way to create a constant for this specific color that can be shared across my CSS, HTML, and JavaScript ...

javascripthtmlcsscolor-scheme

Ways to dynamically apply styles to the component tag depending on the visibility of its content

Consider a scenario where you have a component with logic to toggle the visibility of its contents: @Component({ selector: 'hello', template: `<div *ngIf="visible"> <h1>Hello {{name}}!</h1></div>`, styles: [`h1 { fo ...

javascriptcssangulartypescript

Utilize PHP's foreach loop to showcase information within multiple HTML div containers

I am presented with the following data and would like to showcase it in separate containers using HTML. Name Price Difference Signal CA.PA 15.85 3.5609257364073 MACD AZN.ST 896 3.4881049471963 MACD AMGN 258.57 1.6391533819031 SMA 50/ ...

phphtml

The shopping cart is unable to display the name property as it is undefined

I'm currently working on creating a basic shopping cart using JavaScript. $('.addToCart').click(function(event) { event.preventDefault(); var name = $(this).data('name'); var price = Number($(this).data('price')); ...

javascriptjqueryhtml

Moving data of a row from one table to another in Laravel by triggering a button click

For instance, consider a scenario where clicking a button moves a row to another table in the database and then deletes it. Implementing this functionality in Laravel seems challenging as I am unable to find any relevant resources or guidance on how to pro ...

javascriptphphtmljquerylaravel