How to perfectly align responsive email on iPhone 6

My email design appears aligned to the left on iPhone 6 even though I have used align="center" on the tables and TD's. In my media queries, I have specified a width of 320px with the main table set to width="100%".

@media only screen and (max-device-width: 480px)
table[class=threeHundred20], td[class=threeHundred20], tr[class=threeHundred20] {
width: 320px !important;
display: block !important;
}

While I am okay with the slight side gutters created by this setup on the larger iPhone 6 screen, I do need to center the main content. Is there a method to achieve this without changing the media queries for different device sizes? I would prefer to avoid altering the targets in this way.

htmlcssmedia-querieshtml-emailiphone-6

Answer №1

When content is smaller than its parent container, using display: block can inadvertently align it to the left. A better approach is to utilize inline-block for display along with text-align: center to achieve a centered responsive design without relying on media queries. Check out more details here.

Answer №2

Based on previous encounters involving

text-align: center;

I suggest utilizing

margin-left: 50%;
margin-right: 50%;

as an alternative.

Answer №3

For as long as I can remember, I've been using this method which has proven to be effective across all devices and email clients.

Check out the demo: https://jsfiddle.net/cL011mw3/

Here's the HTML:

<table width="100%">
<tr>
    <td>
        <table width="640" class="width320" align="center">
            <tr>
                <td bgcolor="#999999">
                    text
                </td>
            </tr>
        </table>
    </td>
</tr>

This is the CSS:

@media only screen and (max-width: 500px){
*[class].width320{
    width:320px !important
    }
}

Answer №4

I found this solution to work perfectly for me:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta name="x-apple-disable-message-reformatting" />

Add media queries:

@media only screen and (max-width: 480px){
.fullwidth,
.fullwidth tbody,
.fullwidth tbody > tr,
.fullwidth tbody > tr > td,
.fullwidth tbody > tr > th,
table[class=fullwidth],
table[class=fullwidth] tbody,
table[class=fullwidth] tbody > tr,
table[class=fullwidth] tbody > tr > td,
table[class=fullwidth] tbody > tr > th
td[class=main-border] {
    max-width: 100% !important;
    min-width: 100% !important;
    width: 100% !important;
    display: block !important; <!-- table, tbody, tr, td became blocs -->
    clear: both; <!-- to prevent floating ex: <table align="left"…> -->

    margin: 0 auto !important; <!-- to center the blocks -->
}

}

Remember to include tbody in your table and Outlook styles to eliminate extra white space:

<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;margin:0 auto;">
    <tbody>
    <tr>
        <td valign="middle" align="center">
            <table class="fullwidth" width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="borde-r-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;margin:0 auto;">
                <tbody>
                <tr>
                    <td style="font-size:5px;line-height:5px; height: 10px">&nbsp;</td> <!-- padding & margin not supported by Outlook -->
                </tr>
                <tr>
                    <td valign="middle" align="center">
                        <table class="fullwidth" width="100%" cellspacing="0" cellpadding="0" border="0" align="center" style="borde-r-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;margin:0 auto;">
                            <tbody>
                            <tr>
                                <td>Col 1</td>
                                <td>Col 2</td>
                            </tr>
                        </tbody>
                    </td>
                </tr>
                <tr>
                    <td style="font-size:5px;line-height:5px; height: 10px">&nbsp;</td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table>

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

Adding a unique field to a specifically tailored post type

I'm dealing with a plugin-generated component that showcases articles from a custom post type, each with the class post-id. Unfortunately, I can't modify the plugin's files in the child theme to make changes, so I have to create a custom fun ...

phphtmljquerywordpressadvanced-custom-fields

How to pass the id value between pages in web developmentactics?

I've been struggling to call the id value of one page in another for a while now. I assigned the id value "addedcart" to the form and tried to call it in my PHP code, but no cart value is being displayed. I'm not sure if I am calling the id corre ...

phphtml

Embedded Youtube code saved in database is not displaying on HTML form

My PHP update page allows me to modify a website's database that contains YouTube embed codes. However, when I try to edit the embed code on the update page, only "<iframe width=" displays instead of the complete original code. <html> <? ...

phphtmlsqlyoutube

Steps for Adding an H1 Tag Using GWT

Forgive me for what may be a silly question, but I'm truly struggling to understand how to dynamically add an HTML heading tag to my page using the Google Web Toolkit. My motivation is not related to styling purposes, as any label can be styled. Inst ...

htmljquery-uigwt

Is there a way to specifically target the MUI paper component within the select style without relying on the SX props?

I have been experimenting with styling the Select MUI component using the styled function. I am looking to create a reusable style and move away from using sx. Despite trying various methods, I am struggling to identify the correct class in order to direct ...

csstypescriptmaterial-ui

Struggling with CSS issues in ASP.NET 4.6

For the past few months, I've been diligently working on a project that suddenly hit a snag today. Upon inspecting my website, I noticed that all my button sizes appear to be uniform. I typically use Chrome's developer tools to troubleshoot my we ...

c#cssvisual-studio-2017jquery-3asp.net-4.6

The auto-fill feature in Chrome mistakenly inputs the saved username in the wrong field

My web application, coded in HTML/PHP with a login screen, is encountering an issue with Chrome users. After logging in and navigating to the home page, some users are prompted to save their password. This leads to the username appearing in a field unrelat ...

htmlgoogle-chromeautofill

Angular and WEB API experiencing issues with the update function synchronization

Currently, I'm developing a CRUD example using dotnet core and Angular. In the backend, I have implemented a function in the CarController.cs as shown below: CarController.cs [Route("UpdateCar")] [HttpPut] public IActionResult Put([ ...

html.netangulartypescript.net-core

Creating dynamic height based on width using JavaScript

I'm trying to make a rectangle responsive based on the width of the window. This is my current logic: aspectRatio = 16 / 9 win = { width: window.innerWidth, height: window.innerHeight, } get browser() { const width = this.win.width - 250 ...

javascripthtmlcsscanvaskonvajs

Django does not support CSS styling out of the box

My webpage is rendering HTML correctly, but the CSS styles are not being applied. I am currently in development mode and running the django dev runserver. STATICFILES_DIRS = ("C:/Users/user/site/sitemain/static",) STATIC_ROOT= '' STATIC_URL = ...

htmlcssdjangoweb

Discovering specific keywords within HTML tags and performing replacements using jQuery

I am searching for specific strings within my HTML code, and if I find them, I want to replace them with nothing. For example: HTML: <img src=`javascript:alert("hello ,world!")`> My goal is to locate keywords like javascript, alert, etc, within H ...

javascriptjqueryhtml

Unique CSS-created chronological schedule with alternating design

I am looking to customize my CSS timeline by removing the first line and changing the color of each individual circle. How can I achieve both of these modifications? I attempted to add a class called .not_complete to one of the timeline containers, but it ...

htmlcss

How can I arrange a table in Angular by the value of a specific cell?

Here's the current layout of my table: Status Draft Pending Complete I'm looking for a way to sort these rows based on their values. The code snippet I've been using only allows sorting by clicking on the status header: onCh ...

htmlangulartypescriptangular-material

Customize one header to display different banners on each page using PHP conditionals

I created my website for entertainment purposes and I decided to use different banners on each page. Currently, in my header section, random banners appear using the following code: <div style=' height:145px; background-image:url(images/banners/ba ...

phphtmlif-statementheaderbanner

Having trouble with changing the color of an element when the radio input is checked?

Can someone help me troubleshoot this HTML and CSS code? <label class="radio"> <input type="radio" name="plan" value="plan" required> <span> <h6>Plan</h6> <i class="pe-7s-graph1 ...

htmlcss

Avoid auto-scaling of div content

I need the .content within the main container .box to resize proportionally to match the width of the .box exactly, without being smaller. .box { width: 95%; background-color: red; padding: 20px; text-align: center; margin: 55px auto 40px; } . ...

htmlcss

What is the most efficient method for transferring ASP.NET form data to an Excel spreadsheet?

I am confident that exporting data from my web form should be achievable, but I'm not quite sure of the steps involved. My web form contains numerous select dropdowns and input boxes. Could anyone guide me on how to export the data from these asp co ...

htmlasp.netexcel

Customize the underline color of Material-UI's Input component

Trying to create an input component with a white underline. However, the underline color changes to black when hovering over it. It should remain white. Override the underline class as shown in the demo and instructions below. Despite trying to implement t ...

cssmaterial-uijss

Having trouble with moving the svg:svg element?

I'm struggling to move an svg element that is nested within another svg. I am trying to directly manipulate the x and y values, but I keep encountering a "read-only" error. I attempted to use transform instead, but it doesn't seem to have any eff ...

javascripthtmlsvg

Using jQuery AJAX to preload GIF images for CSS background-image loading

For some time, I have been utilizing jQuery AJAX to preload GIF images with the following code: $("#images").html("<img id='loader' src='../img/ajax-loader.gif' />"); Now, I am attempting to achieve a similar effect (such as a s ...

jqueryajaximagepreloadercss