"Mobile responsiveness issue: HTML email template table not aligning properly at the bottom on

Hello community, how is everyone doing?

I'm currently working on creating my own HTML Email templates, but I'm facing some challenges with responsiveness.

On desktop devices, the email looks like this: https://i.sstatic.net/X8vfu.png

However, when viewed on mobile, I need the elements inside {{}} to stack vertically like this: https://i.sstatic.net/gDj1u.png

Unfortunately, what's happening is that the first element shrinks with large text, and the second one doesn't move down as intended:

https://i.sstatic.net/jShLO.png

Can anyone assist me with the CSS for this issue? I have included it below:

.tg {
border-collapse:collapse;
border-spacing:0;
width: 100%;
margin: 32px auto 32px;
}
.tg td{
overflow:hidden;
word-break:normal;
}
.tg .tg-3z1b{
text-align:right;
vertical-align:top;
font-weight: normal;
}
.tg .tg-73oq{
text-align:left;
vertical-align:top
}
.main-content-table {
margin: 64px auto;
}

 <table class="tg">
    <tbody>
    <tr>
        <td class="tg-73oq" style="width: 50%">Carga de Saldo</td>
        <td class="tg-3z1b" style="width: 50%">{{saldo}}</td>
    </tr>
    <tr>
        <td class="tg-73oq">Total</td>
        <td class="tg-3z1b">{{total}}</td>
    </tr>
    <tr>
        <td class="tg-73oq">Saldo Total</td>
        <td class="tg-3z1b">{{saldoTotal}}</td>
    </tr>
    <tr>
        <td class="tg-73oq">Fecha</td>
        <td class="tg-3z1b">{{fecha}}</td>
    </tr>
    <tr>
        <td class="tg-73oq">Código de Operación</td>
        <td class="tg-3z1b">{{qExitosos}}</td>
    </tr>
    </tbody>
</table>
htmlcss

Answer №1

Utilize CSS media queries to customize the design based on the screen width.

This method has been tested with the Papercut email client, however, not all email clients may support it.

<style>
.tg {
border-collapse:collapse;
border-spacing:0;
width: 100%;
margin: 32px auto 32px;
}
.tg td{
overflow:hidden;
word-break:normal;
display: block;
}
@media (min-width: 800px) {
    .tg td{
        display: table-cell;
    }
}
.tg .tg-3z1b{
text-align:left;
vertical-align:top;
font-weight: normal;
margin-bottom: 20px;
}
@media (min-width: 800px) {
    .tg .tg-3z1b{
        text-align: right;
        margin-bottom: 0;
    }
}
.tg .tg-73oq{
text-align:left;
vertical-align:top
}
.main-content-table {
margin: 64px auto;
}
</style>

<table class="tg">
    <tbody>
    <tr>
        <td class="tg-73oq" style="width: 50%">Carga de Saldo</td>
        <td class="tg-3z1b" style="width: 50%">{{saldo}}</td>
    </tr>
    <tr>
        <td class="tg-73oq">Total</td>
        <td class="tg-3z1b">{{total}}</td>
    </tr>
    <tr>
        <td class="tg-73oq">Saldo Total</td>
        <td class="tg-3z1b">{{saldoTotal}}</td>
    </tr>
    <tr>
        <td class="tg-73oq">Fecha</td>
        <td class="tg-3z1b">{{fecha}}</td>
    </tr>
    <tr>
        <td class="tg-73oq">Código de Operación</td>
        <td class="tg-3z1b">{{qExitosos}}</td>
    </tr>
    </tbody>
</table>

https://i.sstatic.net/b2yir.png

https://i.sstatic.net/8bRPV.png

Remember that not all email clients support media queries. For widest compatibility, opt for a simple design approach when creating emails.

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

Exploring the Pathways of a Website's Architecture

Recently, I stumbled upon a website that piqued my interest. I am looking to send POST requests to it and then retrieve the HTML code from subsequent GET requests. Is there a way for me to uncover the organization of these routes? My plan is to perform m ...

htmlpython-3.xroutes

execute javascript code found in the html document

Currently, I have a bash script that utilizes curl to download a page. Then, it uses grep and sed to extract javascript within the html block to a file. Following this, I use node to evaluate and leverage the downloaded javascript. Here is an example: cur ...

javascripthtmlnode.jsbashsed

CSS not being applied to certain HTML elements due to an error in implementation

Utilizing Bootstrap's vue form-group has been instrumental in my creation of input fields. I am currently attempting to apply specific CSS styling to the 'legend' element within the following code: <fieldset id="__BVID__59" class="form-g ...

htmlcssvue.js

What is the best jQuery library to add to my website?

I have included several jQuery scripts on my website for various functionalities such as sticky header, anchors, and animations. I am wondering if it is necessary to include all of them or if I can just include one or two? Here are the jQuery scripts I ha ...

javascriptjqueryhtml

Easily style Angular directives (whether they are custom or built-in) using the native handle for CSS

In my Angular application, I have directives set up as follows: <!doctype html> <html lang="en" ng-app="cfd"> <head> ... </head> <body> <div class="container"> <!-- Header --> <div ...

htmlcssangularjsangularjs-directive

Instructions on adding a class to the parent element when the child has a particular class

Here is the html structure I am working with: <section> <div class="v-middle"> <div class="row"> <h5 class="heading">Heading goes here</h5> </div> </div> </section> ...

javascriptjqueryhtmlparent-child

Optimizing the particle rendering speed for HTML5 <canvas> elements

Currently conducting an experiment to enhance the maximum particle count before frame-rates begin to decrease in HTML5 Canvas. Utilizing requestAnimationFrame and employing drawImage from a canvas as it appears to be the most efficient method for image re ...

javascripthtmlhtml5-canvasspritewebgl

Arrange the divs alongside one another within a container and ensure that the container adjusts its width to fit the children

I am in need of a container div: This div should adjust its width based on the content within. I would like the child elements to align horizontally. The container itself should form a single horizontal line. I prefer not to use flex because it tends to ...

cssreactjs

Is there a way to add a <video> tag in tinymce editor without it being switched to an <img /> tag?

I am attempting to include a <video> tag within the tinymce editor, but it keeps changing it to an <img> tag. Is there a way to prevent this conversion and keep the <video> tag intact? I want to enable videos to play inside tinymce whil ...

javascripthtmltinymce-4

Focus border radius for anchor tag image

I am trying to implement the following CSS: .sky:focus {border-radius: 25px; border: #000 solid 1px; outline: none} And my HTML looks like this: <a class='sky' href='#'><img src='cloud.jpg'></a> I want a 25 ...

htmlcssfocusoutlineborder-radius

Incorporate a comma after the second or third digit to separate currency values in JavaScript

Is there a way to add commas to currency values at the 3rd or 2nd place depending on the value itself? The desired output format is: 1000 => 1000 10000 => 10,000 210000 => 2,10,000 2010000 => 20,10,000 12010000 => 1,20,10,000 I am currentl ...

javascriptphphtmlcss

How can we develop an AJAX chat with enhanced scrolling capabilities?

Could someone provide me with some examples on how to achieve this task? I already have some HTML code: <div id="chatDisplay"> </div> <input type="text" id="message" /><input type="button" id="send" value="Send" /> Next, I have so ...

htmlajaxjquery-pluginsjquery

Utilizing the Jquery ready method in conjunction with the load function

While utilizing the ready() method to access the DOM, I encountered an issue where jQuery was returning undefined when trying to access an element. Even after nesting the ready() function inside $(window).on("load", function()), there were still instances ...

javascriptjqueryhtml

Struggling with the grid layout in percentage and feeling perplexed

As I delve into the world of grid systems, I find myself grappling to comprehend it fully. The complexities can sometimes leave me feeling inadequate in my understanding. From what I gather, a 12-column grid system without any margins means that the 12th ...

htmlcsslayoutgrid

What could be causing the inability to update a newly logged-in user without refreshing the page?

Hello, I have encountered an issue with my application that involves registration and login functionality. The problem arises when a new user logs in, as I must refresh the page to get the current user information. I am currently using interpolation on the ...

htmlangulartypescript

Setting the path to an image component using the style jsx tag in Next.js: A step-by-step guide

While utilizing jsx to define styles for my NextJs components, I am facing the challenge of defining a background image for certain elements. I have realized that only relative paths or absolute paths are accepted. But how can I pass a relative path to th ...

cssreactjsjsxnext.js

Learn how to showcase the value of the selected radio button in AngularJS

To show the chosen radio button in the response div, make sure to hide the div if no option is selected. Check out the code below: <body ng-app="QuestionDisplayModule"> <form> <div ng-controller="QuestionDisplayController" ...

javascripthtmlangularjs

Create a copy of a JQuery slider

Hello there, I'm a first time poster but have been reading for a while now. I've been working on creating a simple jQuery Slider and I'm facing an issue... I want to create a slider that utilizes minimal jQuery and can be easily duplicated o ...

jqueryhtmlcssslider

Optimizing the selection and deselection of checkboxes using JQuery with X checkboxes in mind

If I have a set of 'X' checkboxes (any input elements) in a form and "M" option selection indexes ("M" less than or equal to "X"), how can I efficiently select the "M" option indexes/values and deselect the remaining checkboxes? For example, if ...

jqueryhtmlcheckboxunobtrusive-javascript

Utilizing values from .properties files in Java with Spring for internationalization: A straightforward approach to handle Strings

Here is the code snippet I am using: @Value("${app.user.root}") private String userRoot; This code helps me to fetch a constant value from my application.properties file. Within my GetMapping method, I need to redirect to the error page and pass a S ...

javahtmlspringspring-mvc