Mobile-friendly HTML email design featuring bottom navigation bar

Currently, I am in the process of coding a responsive email template. Here is what I have so far: Click here to view

<tr class="main_nav">
    <td id="mobile_nav" width="600">
        <table cellpadding="0" cellspacing="0" width="100%">
            <tr>

                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                    <a href="#" style="text-decoration: none; color: #999999;">Nav 1</a>
                </td>

                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                    <a href="#" style="text-decoration: none; color: #999999;">Nav 2</a>
                </td>

                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                    <a href="#" style="text-decoration: none; color: #999999;">Nav 3</a>
                </td>
                
                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                    <a href="#" style="text-decoration: none; color: #999999;">Nav 4</a>
                </td>

                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                    <a href="#" style="text-decoration: none; color: #999999;">Nav 5</a>
                </td>

                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                    <a href="#" style="text-decoration: none; color: #999999;">Nav 6</a>
                </td>

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

The issue currently is that the top navigation on desktop appears between the main call-to-action and the next two columns on mobile. I have tried rearranging the code but haven't found the right solution yet. How can I ensure that it appears at the footer instead?

htmlcsshtml-email

Answer №1

try out this snippet:

@media only screen and (max-width: 500px) {
tr[class="main_nav"] {
   display: table-footer-group;
   position: absolute;
   top: 1000px;
   bottom: 0px;   
}}

Answer №2

Your current setup includes media queries for screen sizes under 500px, where certain table rows are displayed differently:

@media only screen and (max-width: 500px){
tr[class="main_nav"] {
    display: table-footer-group;
}
tr[class=main_cta] {
    display: table-header-group;
}
}

However, in your actual HTML code, the table rows are not matching this layout:

<tr class="main_nav"></tr>
<tr class="main_cta"></tr>
<tr height="45"></tr>
<tr></tr>

To ensure consistency, consider setting the other two table rows to be displayed as table-header-group as well.

Answer №3

Hello,

It seems that the code responsible for stacking in the incorrect order can be found at line 62.

 tr[class="main_cta"] {
        display: table-header-group;
    }

Once this code is either commented out or removed, the stacking functions as intended. However, please note that removing it may cause your navigation to shrink in width.

Next, apply a similar action to the following piece of code:

tr[class="main_nav"] {
display: table-footer-group;

}

Following these steps should resolve the issue.

Thank you

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

VUE 3 inexplicably failing to display the custom component's template, console remains error-free

I am utilizing flask, html, js for building a web application. I am currently facing an issue where the template defined in the component <add-movie> within movies.js is not being rendered into add_movies.html. The add_movies.html extends base_admin ...

javascripthtmlvue.jsflaskvuejs3

Connect two selection boxes' values with a single knockout date attribute

I am currently working with a knockout object that consists of a single property named created. The created property contains a Date object which represents the date of an event. In my HTML form, I have two select box inputs: one for selecting hours and th ...

javascripthtmlbindingknockout.js

The mysterious case of the missing CSS file in Node.js

I recently set up a new Node.js Express Project. However, I am facing an issue with the index.ejs file showing the error: Undefined CSS file ('/stylesheets/style.css'). Here is the content of the index.ejs file: <!DOCTYPE html> <html& ...

javascripthtmlcssnode.jseclipse

Submit a form to the same page without reloading and toggle the visibility of a div after submission

Is there a way to submit a form without refreshing the page and hiding the current div while showing a hidden one? I attempted to use the following code, but it ends up submitting the form and reloading the page. <form method="post" name="searchfrm" a ...

phpjavascripthtml

Steps to remove a row from a table in a ReactJS component

I'm struggling with implementing a delete operation for table rows and encountering errors. Any assistance in resolving this issue would be greatly appreciated. Since I am unsure how to set an auto-incrementing id, I used Date.now(). Now my goal is t ...

javascripthtmlreactjs

I need to send information from my JavaScript code to my Flask server

I'm having an issue with transferring data from JavaScript code in an HTML template to my Flask server. Specifically, I want to send geolocation coordinates (latitude and longitude) obtained through JavaScript to my Flask server, but I'm unsure o ...

javascriptpythonhtmljsonflask

While attempting to dynamically add styles to a stylesheet using JavaScript, an error message was encountered stating "Cannot read property 'length' of undefined"

I am currently developing a custom polyfill that enables older browsers like Internet Explorer to interpret and run media queries using traditional CSS selectors. The process is outlined as follows: Iterate through each stylesheet found in the document A ...

javascriptcssmedia-queriespolyfills

What is the best way to remove unnecessary scrollbars from a material dialog that includes a radio-group?

Check out this Stackblitz demo that showcases a dialog with a radio group inside the mat-dialog-content div. Notice how the dialog-content displays an unsightly scrollbar: https://i.sstatic.net/gvqlH.png This issue doesn't occur with other compon ...

cssangularangular-material

What methods can I use to prevent a number from becoming negative?

I am currently developing a game where players collect resources, spend them to create more resources, and engage in various activities. However, I'm facing an issue where the resource count goes into negative numbers when too much of a certain item i ...

javascriptjqueryhtmlcssbutton

Struggling to Mask Password Input with Dots in HTML?

I am currently developing a User Registration System and I would like the password field to display as dots for security purposes. However, every time the page loads, the Email and Password fields are already filled in: Email: root Password: password ( ...

phphtmlcss

What is the best way to send a string value from HTML to a JavaScript function as a parameter?

When embedding HTML codes in Java, I encountered an issue where I needed to pass a string value from HTML to a JavaScript function. Initially, I tried using the following code: out.print("<script>init("+macId+")</script>"); However, this meth ...

javascriptjqueryhtml

What is the best way to position a div at the center with a set width and fixed positioning?

I'm currently working on coding and attempting to center a div horizontally in the middle of the page. The div is empty at the moment, just a plain white rectangle with specific dimensions. Here's my code snippet: #wrapper{ width:500px; height:1 ...

csshtmlalignmentcss-positioncenter

Master the art of keeping track in just a single line

I need to ensure these tabs stay in a single line and remain responsive for mobile devices. Below is the code snippet: <div class="navbar"> <div class="navbar-inner"> <ul class="nav nav-tabs"> <li class="active"& ...

htmltwitter-bootstrap

"Troubleshooting a JSON structure containing a complex array of objects with multiple layers

I've structured a complex array with JSON objects to allow users to customize background images and create unique characters. Below is the main code snippet: var newHead; var newBody; var newArm; var masterList = [ { {"creatureName":"Snowman ...

javascripthtmljson

Combining HTML, CSS, and ASP.NET is a

<table cellspacing="0" cellpadding="0" width="100%" style="background-image: url('/ProjectSample/images/LoginBox.png'); background-repeat: no-repeat;"> Is there something incorrect with the way this style tag is referencing an image with ...

htmlcss

Changing React Phone Number input field's default style: A step-by-step guide

Is there a way to modify the appearance of the react-phone-number-input component using this npm package: https://www.npmjs.com/package/react-phone-number-input? I am working with React Hook Form and Tailwind CSS alongside this component. However, I' ...

cssreactjstailwind-cssreact-hook-form

Laravel - Unauthorized access to array index

I am trying to change the color of a table cell in Laravel based on its content, but I keep encountering this error: "Illegal string offset 'Disponible' (View: C:\Users\RAYLAN\Documents\CRMSAV\resources\vie ...

phpcsslaravelhtml-tablecell

Learning how to use Express.js to post and showcase comments in an HTML page with the help of Sqlite and Mustache templates

I am facing a persistent issue while trying to post new comments to the HTML in my forum app. Despite receiving various suggestions, I have been struggling to find a solution for quite some time now. Within the comments table, each comment includes attrib ...

javascripthtmlnode.jssqliteexpress

How can one ascertain the dimensions of the video margins within an embed-responsive video container?

I am in search of a solution to extract information from within the embed responsive element. When it comes to embed-responsive video elements, they automatically include internal margins on either the x or y axis to maintain the aspect ratio of the video ...

htmlcssbootstrap-4

Is it possible to align an image that uses position:relative with one that uses position:absolute?

On a webpage, I have placed two images. The first image is set to position:relative and the second image is positioned right below it with position:absolute. How can I ensure that as you zoom in or out, the second image remains aligned with the first ima ...

javascripthtmlcssimagecss-position