"Create a dynamic HTML newsletter utilizing tables similar to the responsive design principles

Looking to create a mobile-responsive newsletter using my style.css

<table cellpadding="0" cellspacing="0" border="0" align="center" width="600" bgcolor="#fff">

 <tbody> 
    <tr>
        <td style="padding-bottom:5px" valign="top">
            <table cellpadding="0" cellspacing="0" border="0" align="center" width="295" style="background:#ffffff">
                <tbody> 
                    <tr>
                        <td style="padding:15px;background-color:#fff">

                        image

                        </td>

                    </tr>
                </tbody>
            </table>
       </td>
       <td style="padding-bottom:5px" valign="top">
            <table cellpadding="0" cellspacing="0" border="0" align="center" width="295" style="background:#ffffff">
            <tbody>
                <tr>
                    <td style="padding:15px;background-color:#fff">
                        text
                    </td>

                </tr>
            </tbody>
        </table>
       </td>    
    </tr>   
    <tr>
        <td style="padding-bottom:5px" valign="top">
            <table cellpadding="0" cellspacing="0" border="0" align="center" width="295" style="background:#ffffff">
                <tbody>
                    <tr>    
                        <td style="padding:15px;background-color:#fff">
                            text
                        </td>

                    </tr>
                </tbody>
            </table>
        </td>

    </tr>    



 </tbody>
</table>

Although the design looks perfect on desktop, it's not displaying correctly on mobile devices.

The layout appears as:

image
text
text
image

I would like it to display as:

image
text
image
text

I came across Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3 and I'm wondering if there is something similar for tables.

I've tried adjusting the alignment attributes but without success. Can anyone provide some guidance?

htmlcsstwitter-bootstraphtml-tablenewsletter

Answer №1

To achieve the side-by-side layout without using two table cells (td), it is recommended to create separate tables for each side and utilize the align property on the table. This approach allows flexibility in arranging the left and right sides in any order when the email is displayed in a single column.

For detailed instructions and an example of this method, you can refer to Julie Ng's Antwort template:

https://github.com/InterNations/antwort/wiki/Columns-to-Rows-%28Version-1.0%29

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

jquery add to table id, not to a table within

Having trouble adding a table row to a specific table ID without it appending to other tables with different IDs nested inside. I've searched for a solution but can't seem to find one. Can someone help me figure out what I'm doing wrong? Her ...

javascriptjqueryhtmlappend

Understanding JavaScript Regular Expressions

To ensure that no HTML tags are entered into a textarea, I am utilizing the following regex for validation. If any HTML tags are detected in the textarea, I need to display a validation message. The regex being used is: /<(\w+)((?:\s+\w ...

javascripthtml

Create dynamic flex transitions

After searching through various CSS resources and websites, I haven't found an answer to my specific query. I have been exploring CSS tricks as well as http://n12v.com/css-transition-to-from-auto/ but still uncertain if what I'm looking to achiev ...

htmlcssflexboxcss-transitions

Personalize the option for yiiootstrap4ActiveField::radioList in Yii2

I am currently using yii\bootstrap4\ActiveField::radioList and I am attempting to include HTML tags inside the options of my radioList. $list = [ 0 => '<strong>Option1</strong><br> lorem ipsum lorem ipsum&ap ...

htmlyii2radiobuttonlist

Tips for changing between two texts within a button when clicked

Seeking a solution for toggling between two different texts inside a button when making an ajax call, with only one text displayed at a time. I'm facing difficulty in targeting the spans within the button specifically. Using 'this' as conte ...

javascriptjqueryhtmlcssajax

Creating a JavaScript function using jQuery to calculate the total sum of textboxes with two specified classes

I'm currently attempting to calculate the total of a group of textboxes by utilizing jquery. Each textbox is styled with a class (class1) using bootstrap. To execute the jquery function, I've added an extra class (class2). Below is an example of ...

javascriptjquerytwitter-bootstrap

JavaScript Audio working on local machine but not on server due to HTML5 compatibility issues

For my project, I am utilizing audio and Javascript in the following way: To start, I populate an array with audio files: var soundArray = new Array(); for (i=0; i<6; i++) { soundArray[i] = new Audio('sounds/sound_' + i + audioExt); ...

javascripthtmlaudio

Confused by navigating with php

I've been attempting to convert this link into a PHP foreach loop without any success, and I'm new to Stack Overflow. I've used an array to generate the code, but I am uncertain of how to transform this code into a foreach loop. <ul class ...

phphtmlcss

SB Admin 2 menu with multiple levels does not collapse as expected

I'm in the process of integrating the menu from the sb admin 2 template into my Ruby on Rails application: As I gradually added components to test functionality, I successfully implemented the top and side nav bars. However, I encountered an issue wi ...

javascripthtmlcssruby-on-railstwitter-bootstrap

A CSS rule to display a nested list on the left-hand side

I created a menu that you can view here. When hovering over "tanfa demo example," the sublist appears on the right side. The issue I'm facing is that my menu is positioned all the way to the right, which means the sublist also appears on the extreme ...

javascriptjquerycssdrop-down-menu

Can you please specify the type of values being entered as input?

Query: How do I identify the data type of the value entered in an input field? Whenever I use typeof, it always returns string unless the string is empty. I searched various forums extensively but couldn't find a solution. Can someone assist me with t ...

javascripthtml

Navigation menu with submenus containing buttons

I attempted to incorporate a dropdown into my existing navigation bar, but unfortunately, the dropdown content disappeared after adding the necessary code. I am now at a loss on how to troubleshoot this issue and make the dropdown function properly. Despit ...

javascripthtmljquerycssnav

Using Javascript to make a call to load or post with jQuery

I'm not dealing with Ajax this time, but rather with JavaScript initializations. Is there a way to automatically update all the loaded elements when using $(element).load(...), in order to, for example, create a rangeInput element from an input type ...

jqueryhtml

Error Encountered While Building Flask Application

Whenever I try to submit the form, an error pops up and I can't see the flash message even though it's added to my database: werkzeug.routing.BuildError BuildError: ('/contacts', {}, None) Here are my methods: @app.route('/conta ...

pythonhtmlsqliteflask

Tips for achieving a background animation similar to the one shown on this page

Check out this link: danielcoding.me/resume/#contact I am interested in this animation: screenshot I tried inspecting element on the page, but couldn't find any background images. How can I create this animation? Is it achieved through JavaScript or ...

javascripthtmlcss

How to dynamically change the class of an element that contains other elements using JavaScript and JQuery

I have created a blog archive with the following format: +Year +Month Title Here is a snippet of the code: <ul> <span class="toggle">+</span> <li class="year">$year <ul> <span ...

javascriptjqueryhtml

Having trouble with Vue image source file paths?

Having an issue with loading an image via file_path on Vue. When using a hardcoded path, it works fine. Refer to the sample code below: JavaScript function getRestaurantsbyId(id) { var restaurants = { "1" : { "name": "xxxx", ...

javascripthtmlvue.js

Using HTML5 date input on an android browser

As I develop a web page catering to Android users, I have incorporated a date form control for users to input dates. However, I have noticed that on most devices, the native date selector does not pop up. Interestingly, on certain Samsung devices like the ...

androidhtmldatebrowser

Overflow error in Rsuite table row cannot be displayed

Please see the image above Take a look at my picture. I am facing a similar issue. I am struggling to display my error tooltip over my table row. Has anyone else encountered this problem before? Any suggestions for me? I have attempted to set the overflow ...

cssreactjsrsuite

Retrieve data from the table and dropdown menu by clicking a button

A script is in place that retrieves data from two columns (Members, Description) dynamically from the table upon button click. Table html Here is the JQuery code responsible for extracting values from the table: $(function() { $('#myButton') ...

javascriptjqueryhtml