"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

What causes my `` to function intermittently?

I've been experimenting with adding attributes and styling to elements. Sometimes my code works perfectly fine, while other times it doesn't produce the desired output. Here's an example of when it works: $('.card-text') .text( ...

javascriptjqueryhtmlcsstwitter-bootstrap

Create multiple buttons with uniform width by adjusting padding in CSS

I recently attempted to create buttons using CSS and padding. Here is the HTML code for the buttons: <link rel="stylesheet" type="text/css" href="css/style-login.css" /> <link rel="stylesheet" type="text/css" href="css/font-awesome-4.0.3.css" /& ...

htmlcssbutton

What is the process for including a JavaScript file in an HTML document?

Greetings to all and thank you for taking the time! I have a straightforward query for you.. I have designed an html page featuring only a basemap (open street map). Moreover, I possess a javascript file which utilizes your coordinates to calculate a perce ...

javascripthtmlfunctionpopupjsfiddle

Keeping the color of CSS buttons consistent can be achieved by setting specific

Here is my CSS code: .horizontalcssmenu ul{ margin: 0; padding: 0; list-style-type: none; list-style:none; } .horizontalcssmenu ul a:active{ color: #00FFFF; background: #FF0033; text-decoration: none; } /* Styles for top leve ...

css

Filtering a section of the HTML using Ajax and jQuery

Dealing with an Ajax call in jQuery that's delivering a lot of unexpected HTML content. I'm attempting to extract the specific part I need, but the console is showing an empty string. Can anyone provide guidance on resolving this issue? $.ajax({ ...

jqueryhtmlajax

Transform text that represents a numerical value in any base into an actual number

Looking to convert a base36 string back to a double value. The original double is 0.3128540377812142. When converting it to base 36: (0.3128540377812142).toString(36); The results are : Chrome: 0.b9ginb6s73gd1bfel7npv0wwmi Firefox: 0.b9ginb6s73e Now, h ...

javascriptjqueryajaxhtml

Failure to send chat form

I have been developing a PHP chat application and everything is working well. However, I am looking to implement AJAX in order to prevent the page from refreshing. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></s ...

phphtmlajax

Completely triggering a forced refresh on a single page application, disregarding cache, service workers, and all other

After experimenting with service workers on my Vue-built website, I made a critical error that has left Safari on my iPhone displaying only a blank page. To troubleshoot the issue, I connected my phone to my Mac and utilized Safari's inspector tool t ...

javascripthtmlvue.jsservice-worker

Using various span elements with distinct alignment within an h1 tag in Bootstrap 5

How can I nest three span tags inside an h1 tag, aligning them differently? The first on the left, the second in the center, and the third on the right. Can this be achieved using Bootstrap or does it require custom CSS? ...

htmlcssbootstrap-5

What is the best way to attach every sibling element to its adjacent sibling using jQuery?

I've been working with divs in Wordpress, where each div contains a ul element. <div class="list-item"> <div class="elimore_trim"> Lorem ipsum </div> <ul class="hyrra-forrad-size-list"> <li>Rent 1< ...

javascriptphpjqueryhtmlwordpress

Which file is the optimal placement for the Bootstrap directory: 'header.php' or 'function.php'?

Having dabbled in WordPress Theme templates for a while, I've decided to try my hand at creating a theme from scratch. After uploading the Bootstrap features onto my server, I'm pondering whether it's better to call the Bootstrap.css files ...

phphtmlcsswordpresstwitter-bootstrap

Align a div vertically in a responsive design layout

How can I get the text inside "grid2" and "section2" to vertically align in the middle? Is this issue related to my HTML or is it a problem with the CSS? Can someone guide me in the right direction? I have searched for similar questions but the answers h ...

csshtmlvertical-alignment

Troubleshooting IE Issues with HTML5 Video Background

When creating a webpage with a video background, I include the following code: position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; background: url(images/bg/home.jpg) no-repeat; background-size: cover; This code works well on ...

jquerycsshtmlvideo

Is there a way to determine whether my CSS style modifications will impact other web pages?

Managing a team of junior developers has its challenges, especially when they unknowingly make CSS style changes that impact multiple pages on our website. Is there a tool or method available to alert them that modifying the color of a specific class will ...

css

Is there a reason why I need to rename the CSS file in order for it to function properly?

I recently completed editing the css file and saved it, but unfortunately, my css file isn't functioning properly. The display remains unchanged and the css files are not being loaded. However, when I decided to rename the css file, everything started ...

htmlcssbootstrap-4

The previous and next buttons are displaying side by side rather than being positioned at the outer edges

I am having an issue where the prev and next buttons are displaying next to each other instead of at the edge of the div. Can someone please assist me in fixing this problem? Below is the provided HTML code: <div id ="moreOption_80322271" class="m ...

htmlcss

What could be causing my widget to not function properly with Django and Bootstrap?

I am currently working with the following Boostrap code in my HTML: <div class="input-group date col-2" id="datetimepicker1" data-target-input="nearest"> {{form.data_contabile|as_crispy_field}} <div class="input-group-append" data-target="# ...

htmldjangobootstrap-4django-formsdjango-templates

Swapping out the video in real-time using an on-demand script

Recently, I encountered an issue with my blog's YouTube video switcher. It seems that the videos won't play once they are changed, and it is related to a light YouTube embed script that I found here: . I believe this script was implemented to imp ...

javascripthtmliframeyoutube

Tips for successfully passing a Prop using the Emotion CSS function

Passing props through styled() in Emotion is something I'm familiar with. For example: const Container = styled("div")<{ position: string }>` display: flex; flex-direction: ${({ position }) => (position === "top" ? "column" : "row ...

cssstyled-componentsemotion

The battle between nested flexbox heights and max-heights

Note: I am observing some unusual behavior on Chrome 72. FireFox 64 seems to be working fine! I am experiencing an issue with a nested flexbox. In the code snippet below, I have added an artificial XL height to .root.container in order to achieve the des ...

htmlcssgoogle-chromefirefoxflexbox