logo
down
shadow

Stacking Tables for a responsive HTML email


Stacking Tables for a responsive HTML email

By : junichi
Date : November 22 2020, 10:38 AM
it should still fix some issue New to this email stuff, but I've searched and searched for days, and still cannot crack this one. I want the two images to stack when shrinking the window and the BG to turn orange as I have it below. I have a feeling it's something in the way I have the tables are nested. , Change the table elements display properties to block, like so:
code :
        @media screen and (max-width: 400px) {
            .content {
                background-color: #DF6618;
                width: 100% !important;
                height: auto !important;
            }
            table, tbody, tr, th, td {
                display: block
            }
            .contentSmall {
                width: 100%;
                height: auto;
            }
        }


Share : facebook icon twitter icon
Centering/Styling three tables in a td (for responsive email templating)

Centering/Styling three tables in a td (for responsive email templating)


By : elzup
Date : March 29 2020, 07:55 AM
To fix this issue HTML code below: , Apply this CSS to your .socialIcons class:
code :
.socialIcons {
    display: inline-block;
}
<td>s not stacking properly in responsive email

<td>s not stacking properly in responsive email


By : Chris Paris-Haines
Date : March 29 2020, 07:55 AM
will be helpful for those in need I would suggest swapping out your inline cells for aligned tables. Cells won't play nice with 50%, you always need to go just under that. In saying that, your cells will never align correctly, which you'll see in my version below.
One draw back to using aligned tables so close is that you'll need to add in ghost tables around your tables, to ensure Outlook respects the close alignment you want and doesn't add the 20px margin it requires between tables.
code :
<!DOCTYPE HTML>
<html>
<head>
    
	<style type="text/css">
		/* Stacked Top Links Navigation Pattern CSS */
		@media only screen and (max-width: 400px) {
			td[class="main_nav"] {
				padding: 0;
			}
			td[class="main_nav"] td {
				display: inline-block;
				/*float: left;*/
				padding: 0 !important;
				width: 49%;
			}
			td[class="main_nav2"] .main_nav_inner table {
				width: 50%!important;
			}
			td[class="main_nav"] a {
				display: block;
				padding: 10px 0;
				background: #565656;
			}
			td[class="main_nav"] .nav1 a,
			td[class="main_nav"] .nav2 a,
			td[class="main_nav2"] .main_nav_inner .nav1,
			td[class="main_nav2"] .main_nav_inner .nav2  {
				border-bottom: 1px solid #777;
			}
			td[class="main_nav"] .nav1 a,
			td[class="main_nav"] .nav3 a,
			td[class="main_nav2"] .main_nav_inner .nav1,
			td[class="main_nav2"] .main_nav_inner .nav3 {
				border-right: 1px solid #777;
			}
		}
		
		/* Stacked Top Links Navigation Pattern CSS */
		@media only screen and (max-width: 400px) {
			td[class="secondary_nav"] {
				padding: 0;
			}
			td[class="secondary_nav"] td {
				display: inline-block;
				/*float: left;*/
				padding: 0 !important;
				width: 100%;
			}
			td[class="secondary_nav"] a {
				display: block;
				padding: 10px 0;
				background: #005c5b;
				text-align: center;
			}
			td[class="secondary_nav"] .nav1 a,
			td[class="secondary_nav"] .nav2 a {
				border-bottom: 1px solid #fff;
			}
		}
	</style>
</head>
<body style="min-width: 100%; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px" yahoo="fix">
<!-- BEGINNING OF NAVIGATION -->
  <table cellpadding="0" cellspacing="0" bgcolor="#565656" width="100%">
      <tr>
          <td class="main_nav" bgcolor="#565656">
              <table cellpadding="0" cellspacing="0" width="100%" bgcolor="#565656" style="width:100%!important">
                  <tr>
                      <td class="nav1" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
                          <a href="#" style="text-decoration: none; color: #ffffff;">Nav 1</a>
                      </td>
                      <td class="nav2" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
                       <a href="#" style="text-decoration: none; color: #ffffff;">Nav 2</a>
                      </td>
                      <td class="nav3" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
                       <a href="#" style="text-decoration: none; color: #ffffff;">Nav 3</a>
                      </td>
                      <td class="nav4" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
                       <a href="#" style="text-decoration: none; color: #ffffff;">Nav 4</a>
                      </td>
                  </tr>
              </table>
          </td>
      </tr>
      <tr>
          <td class="main_nav2" bgcolor="#565656">
              <table cellpadding="0" cellspacing="0" width="100%" bgcolor="#565656" style="width:100%!important">
                  <tr>
                  	<td class="main_nav_inner">
                         <!--[if gte mso 9]>
                            <table border="0" cellpadding="0" cellspacing="0" style="width:600px;">
                                <tr>
                                    <td valign="top" style="width:150px;">
                        <![endif]-->
                    	<table align="left" class="nav1" border="0" cellpadding="0" cellspacing="0" style="width:25%;">
                            <tr>
                                <td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
                                      <a href="#" style="text-decoration: none; color: #ffffff;">Nav 1</a>
                                  </td>
                            </tr>
                        </table>
                        <!--[if gte mso 9]>
                                    </td>
                                    <td valign="top" style="width:150px;">
                        <![endif]-->
                    	<table align="left" class="nav2" border="0" cellpadding="0" cellspacing="0" style="width:25%;">
                            <tr>
                                <td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
                                   <a href="#" style="text-decoration: none; color: #ffffff;">Nav 2</a>
                                  </td>
                            </tr>
                        </table>
                        <!--[if gte mso 9]>
                                    </td>
                                    <td valign="top" style="width:150px;">
                        <![endif]-->
                    	<table align="left" class="nav3" border="0" cellpadding="0" cellspacing="0" style="width:25%;">
                            <tr>
                                <td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
                                   <a href="#" style="text-decoration: none; color: #ffffff;">Nav 3</a>
                                  </td>
                            </tr>
                        </table>
                        <!--[if gte mso 9]>
                                    </td>
                                    <td valign="top" style="width:150px;">
                        <![endif]-->
                    	<table align="left" class="nav4" border="0" cellpadding="0" cellspacing="0" style="width:25%;">
                            <tr>
                                <td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
                                   <a href="#" style="text-decoration: none; color: #ffffff;">Nav 4</a>
                                  </td>
                            </tr>
                        </table>
                        <!--[if gte mso 9]>
                                    </td>
                                </tr>
                            </table>
                        <![endif]-->
                    </td>
                  </tr>
              </table>
          </td>
      </tr>
  </table>
  <br/>
  <!-- END OF NAVIGATION -->

<!-- BEGINNING OF SECONDARY STORY NAVIGATION -->
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
    <tr>
        <td class="secondary_nav" width="600">
            <table cellpadding="0" cellspacing="0" width="100%" bgcolor="#005c5b">
                <tr>
                    <td class="nav1" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; text-align:left;border-right:solid 1px #ffffff;">
                        <a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;color:#ffffff; text-decoration:none;">Secondary nav 1</a>
                    </td>
                    <td class="nav2" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; font-family: arial,sans-serif; font-size: 11px; text-align:left;border-right:solid 1px #ffffff;">
                        <a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;text-decoration: none; color: #ffffff;">Secondary nav 2</a>
                    </td>
                    <td class="nav3" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; font-family: arial,sans-serif; font-size: 11px; text-align:left;">
                        <a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;text-decoration: none; color: #ffffff;">Secondary nav 3</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<!-- END OF SECONDARY STORY NAVIGATION -->
</body>
</html>
html email table cell stacking

html email table cell stacking


By : Sammy Mcgreal
Date : March 29 2020, 07:55 AM
I wish did fix the issue. Tables are notoriously bad at responsiveness. Your best bet would be to add a media query that turns your table components (table, tr and td) into block-level elements at a mobile width. As block-level elements they'll sit on top of each other by default.
From here, if you want to display two elements on the first line and one on the second, you can simply float the cells to the left, and specify a width on the table that will force the third cell to overflow onto the next line.
code :
@media screen and (max-width: 768px) {
  table, tr, td {
    display: block;
  }
  
  table {
    width: 100px;
  }
  
  td {
    float: left;
  }
}
<table>
  <tr>
    <td>data...</td>
    <td>data...</td>
    <td>data...</td>
  </tr>
</table>
@media screen and (max-width: 768px) {
  table, tr, td {
    display: block;
  }
  
  table {
    width: 100px;
  }
  
  td {
    float: left;
  }
  
  td:first-of-type {
    width: 100px;
  }
}
<table>
  <tr>
    <td>data...</td>
    <td>data...</td>
    <td>data...</td>
  </tr>
</table>
Responsive email: reverse block stacking design for mobile

Responsive email: reverse block stacking design for mobile


By : ivan ursul
Date : March 29 2020, 07:55 AM
I hope this helps you . Following code is working exactly how you wanted! I've just added "direction" attribute in section #2 of your code, where we want to change the direction of the display.
code :
<mjml version="3.3.3">
  <mj-body background-color="#ffffff">
    <mj-section background-color="SILVER" text-align="center" vertical-align="middle"  padding="40px 0 25px">
      <mj-column width="50%" align="middle" >
        <mj-image align="middle" src="https://bellard.org/bpg/2.png" target="_blank" width="121px"></mj-image>
      </mj-column>
      <mj-column background-color="SILVER" width="50%">
        <mj-text  background-color="SILVER" align="middle" color="#ffffff" font-size="22px" font-weight="bold">
            Text Block1
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section background-color="#ffffff" background-repeat="repeat" padding="40px 0 25px" text-align="center" vertical-align="middle" direction="rtl" >
      
      <mj-column width="50%" align="middle" direction="ltr" >
        <mj-image align="middle" src="https://vignette.wikia.nocookie.net/arianagrande/images/7/70/Example.png/revision/latest?cb=20160301231046" target="_blank" width="121px"></mj-image>
      </mj-column> 
      <mj-column background-color="#ffffff" width="50%" direction="ltr">
        <mj-text  background-color="#ffffff" align="middle" color="black" font-size="22px" font-weight="bold">
            Text Block2
            </mj-text>
      </mj-column>
    </mj-section>    
    <mj-section background-color="SILVER" background-repeat="repeat" padding="40px 0 25px" text-align="center" vertical-align="middle">
      <mj-column width="50%" align="middle" >
        <mj-image align="middle" src="https://www.axialis.com/tutorials/sample/logo-ps.png" target="_blank" width="121px"></mj-image>
      </mj-column>
      <mj-column background-color="SILVER" width="50%">
        <mj-text  background-color="SILVER" align="middle" color="#ffffff" font-size="22px" font-weight="bold">
            Text Block3
        </mj-text>
      </mj-column>
    </mj-section>    
  </mj-body>
</mjml>
CSS Responsive Web Design for HTML Stacking Columns in Same Section

CSS Responsive Web Design for HTML Stacking Columns in Same Section


By : Стас Мамонтов
Date : March 29 2020, 07:55 AM
I wish did fix the issue. You have error in your css code. It should be width: 100% not width = 100%. Try this code.
code :
@media screen and (max-width: 600px) {
.col1{
    display: block;
    width : 100%;
}
.col2{
    display: block;
    width : 100%;
}
}
Related Posts Related Posts :
  • Bootstrap3 - Removed container-fluid
  • Bootstrap framework not responsive for asp.net webform
  • How to align two inner divs inside outer absolute positioned div that has fixed width in which both divs have the same w
  • Div to ignore html tags
  • Prevent caching and stale content with a static web site
  • Is there a way to change the whole document with one selector in CSS?
  • why cant I click om my navigationbar links?
  • Is there a CSS/HTML way to cut multiple shapes out of the top/bottom of a div?
  • css border around multiple links/images
  • 'No data was received in the uploaded file', but file is not empty
  • How input boxes save previous entries
  • AMP carousel direction change
  • Bootstrap multiple carousel not working on thumbnails click
  • Is there a way to put a permanent space into an input field?
  • Html boxes not displaying properly
  • How can I change a variable in Jekyll _config.yml dynamically?
  • How can I prevent DIVs from overlapping a right floated image?
  • Eclipse and .tml files highlighting not working
  • Footer is not in the bottom of the window, (phonegap jquery mobile app for windows mobile)
  • How to put div over another
  • How to use glyphicons in bootstrap 3.0
  • Wordpress page links not working
  • How Do I Use CSS to Set the Color of An ALink?
  • Webpage doesn't scroll smoothly on screen
  • YouTube iframe, browser looks for file locally
  • html displaying inline image
  • Font acting differently on IE and Firefox
  • Encoding and decoding of the character references
  • An Image Button navigate to another site html/css
  • IE8 "Save Target as ..." won't display for block elements
  • Image hover transition for span - CSS
  • How to apply min and max on textarea?
  • How to draw multiple horizontal lines (Notebook Paper effect) using css?
  • Table Printing Issue: Gaps in top and Bottom Border of th Elements
  • grouping elements with div and applying stylesheet for that group
  • Click <div> to expand, then click again to shrink - Its expanding, just not shrinking
  • CSS - How can I center a <script>'s output?
  • Django's template variable gets interpreted as HTML
  • ngx datatable vertical scroll with rowheight set to auto
  • How to make input text border with CSS when it's OnFocus
  • Anyone know of a calendar web widget for my website I could use?
  • How does Bootstrap manage to use fixed positioning for navbar on iOS?
  • Centered text in fully clickable table cell
  • Compare HTML and HTML5
  • steps of creating webpage in bangla
  • css root element margin
  • What is the point of using absolute positioning in CSS?
  • Responsive solution for long URLs (that exceed the device width)
  • Divs don't collapse as they should - media queries
  • QTreeWidgetItem display html
  • Testing html/css image on local from jfiddle
  • long attribute value of HTML
  • Why my svg picture is truncated at the bottom when embedded in html
  • Display CSS: some divs fixed, some flexible (2)
  • How to append href strings with variables in html with PHP?
  • css - Why is there a big white space between text lines?
  • div image position fixed + scroll
  • Hide specific elements from html using css
  • how to align the arrow in menu item?
  • How do I create a trapezoidal button using CSS?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org