I'm creating a responsive email... and tested it out on mail chimp and it was fine all throughout. but when tested on exact target (the email client needed to send out this email)
the image I need to center near bottom of email... WILL not center. see code:
<div class="layout one-col fixed-width" style=
"Margin: 0 auto;max-width: 600px;min-width: 320px; width: 320px;width: calc(28000% -167400px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style=
"border-collapse: collapse;display: table;width: 100%;background-color: #f8f6f6;"
margin-left:="" emb-background-style="">
<!--[if (mso)|(IE)]><table align="center" cellpadding="0" cellspacing="0" role="presentation"><tr class="layout-fixed-width" emb-background-style><td style="width: 600px" class="w560"><![endif]-->
<div class="column" style=
"text-align: center; position: absolute !important; color: #8e8e8e;font-size: 14px;line-height: 21px;font-family: Cabin,Avenir,sans-serif;max-width: 600px;min-width: 320px; width: 320px;width: calc(28000% -167400px);">
<div style=
"Margin-left: 20px;Margin-right: 20px;Margin-bottom: 15px;font-size: 12px;font-style: normal;font-weight: normal;"
align="center">
<a href="url"
target="_blank"></a>
<center>
<img style=
"Margin-top: 10px; Margin-left: 20px;Margin-right: 20px;Margin-bottom: 15px;border: 0;display: block; text-align: center; position: absolute !important;height: auto;width: 100%;max-width: 257px;"
alt="Partnerships" src="image7_1112017.png" />
</center>
</div>
</div><!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</div>
</div>
</body>
Everything else seems to be fine... but this is the only image that needs to be centered. fyi i got got the template from campaign monitor and modified accordingly. image was not centered in template.
Setting the width of a block-level element will stop it from filling the width of its container. Taking advantage of this you can set the margin to automatically split the remaining space evenly on the left and right side.
<div style="width: 200px; margin: auto;">
<img alt="Partnerships" src="image7_1112017.png" style="width: 100%;" />
</div>
Here we set the image container width to 200px and the image to 100% so it will scale to the width given. So even if an image is 500px wide, it will be centered and scaled down to 200px because that is the defined size of the container. If you know the width of your image, assign that to the container then setting the image element width becomes unnecessary.
EDIT
You may want to consider reformatting the body of your html. You will want to remove display:table; from the container with the layout__inner class.
<body>
<div class="layout one-col fixed-width" style="max-width: 600px;min-width: 320px;">
<div class="layout__inner" style="background-color: #f8f6f6;">
<!-- Content Body -->
<div style="margin-bottom:15px;">
Here is some example content. This is where you want your main content to be.
</div>
<!-- /Content Body -->
<div style="width:200px;margin:auto;">
<img alt="Partnerships" src="image7_1112017.png" style="width: 100%;" />
</div>
</div>
</div>
</body>
Here is a working example: JSFiddle
All you need is a one column one row table (maybe). You have a lot of divs in your code, way too many. And also a lot of CSS that won't work in an email. Keep the CSS simple, use tables to center things. Use a lot of nested tables rather than one table with many rows and columns. Try this in your DIV. It may work, but you may have to rework the rest of your code too.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<img
alt="Partnerships" src="image7_1112017.png" style="margin-top: 10px; margin-left: 20px;margin-right: 20px;margin-bottom: 15px;border: 0;" /></td>
</tr>
</tbody>
</table>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
At the moment I have one <table> for the whole page, and one <table> for the header. In the header table there are two columns filled with two simple images. See below for the first result:
These columns are responsive, but what I would like to do is to make the header a maximum width of 640 pixels, and a minimum width of 640 pixels. Assume that the images are just an example, because the other images I want to use are smaller, and the fact is that there is no space between these images. I could add a padding, but the responsiveness doesn't work properly anymore.
And the second is when I make the window smaller, the image on the right side goes under the first image which is good (see below for the responsive result). But this needs to happen already when the screen size is below 640 pixels and not just when the window touches the image on the right side.
Responsive result:
What do I need to do to make the header a minimum and maximum of 640 pixels, and to make it possible the responsive starts when the window is below 640 pixels?
I use the following code:
<!-- WHOLE PAGE -->
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f3f3f3;">
<tr>
<td style="text-align: center; vertical-align: top;">
<!-- HEADER -->
<table align="center" cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff; ">
<tr>
<!-- Logo -->
<td align="left" style="display: inline-block; padding: 5px;">
<a href="#">
<img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
</a>
</td>
<!-- Logo -->
<td align="right" style="display: inline-block; padding: 5px;">
<a href="#">
<img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Use below media query to your CSS file. It will take your td to width 100% below 640 devices.
Note: I have mentioned two class in header table and logo td.
.logo:first-child
{
background: red;
}
.logo:last-child
{
background: blue;
}
img{
width:100%;
}
#media screen and (max-width: 640px) {
.header{
width:100%;
}
.logo{
width:100%;
}
}
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f3f3f3;">
<tr>
<td style="text-align: center; vertical-align: top;">
<!-- HEADER -->
<table align="center" cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff; " class="header">
<tr>
<!-- Logo -->
<td align="left" style="display: inline-block; padding: 5px;" class="logo">
<a href="#">
<img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
</a>
</td>
<!-- Logo -->
<td align="right" style="display: inline-block; padding: 5px;" class="logo">
<a href="#">
<img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
See jsfiddle for responsive -
https://jsfiddle.net/vaishuk/qhqgrgnc/1/
Hope this helps :)
I think you are missing Media Query.
Setting the display to inline-block makes the div's align side by side to each other.
If you remove the inline-block on the td(s) :<td align="left" style="display: inline-block; padding: 5px;">.
inside the second table and add a media query after giving it a css class:
` #media (max-width:640px){
td.secondtable-cell{
display: block;
}
}`
This should work as expected. Note, you might need to add marigins/padding for space.
Please do not use tables. Tables are not viable to be responsive and people now a days use div to actually make such containers possible.
CSS:
#page{
width: 1280px;
}
#container1,#container2{
disply:inline-block;
width:49%;
}
HTML:
<div id="page">
<div id="container1">Container2</div>
<div id="container2">Container1</div>
</div>
i have a problem with 2 divs that have to show right next to each other with space between them. It has to be responsive ofc and the max-width can only be 600px while the min-width has to be 280px.
It actually works as intended when i open the html in the browser, but when i send it as a mail, the two divs are right next to each other, with the space being above the second div instead of between them. Also they are fixated to the left for some reason.
How it looks in the browser (and how it should look):
How it looks after being sent per mail:
So i dont really know why it doesnt work as intended..
Also sorry for all that code, but if you test it in a browser u can see, that it works perfectly fine , which it doesnt when used as a mail template..
<div style="background: url('http://www.iuno-projekt.de/media/com_acymailing/templates/newsletter/img/hintergrund.png'); max-width: 700px; margin-left: auto; margin-right: auto;">
<div class="layout two-col" style="Margin: 0 auto;max-width: 600px;min-width: 280px; width: calc(28000% - 167400px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;">
<div class="column" style="background: #ffffff; Float: left;max-width: 280px;min-width: 280px; width: 280px;text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif; margin-left: auto; margin-right: auto;">
<div style="">
<div style="font-size: 12px;font-style: normal;font-weight: normal;line-height: 19px;Margin-bottom: 20px;" align="center">
<img style="border: 0;display: block;height: auto;width: 100%;max-width: 450px;" alt="some img" width="260">
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px; background: #ffffff;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<h3 style="Margin-top: 0;Margin-bottom: 12px;color: #3b4554; font-family: 'Raleway', Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 0.015em; line-height: 1.15em; text-transform: uppercase; padding: 0 20px;"><strong>Title</strong></h3>
</div>
</div>
<div style="background: #ffffff; Margin-left: 20px;Margin-right: 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p style="Margin-top: 0;Margin-bottom: 20px;">..........</p>
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px;">
<div class="btn btn--depth btn--medium" style="Margin-bottom: 20px;text-align: center;">
<img src="http://www.iuno-projekt.de/media/com_acymailing/templates/newsletter/img/right-arrow-grn.png" alt="icon" />MORE
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px;">
<div style="mso-line-height-rule: exactly;line-height: 15px;font-size: 1px;"> </div>
</div>
</div>
<div style="Float: left; max-width: 40px; width: 40px; margin-left: auto; margin-right: auto;" align="center">
<div style="mso-line-height-rule: exactly;line-height: 15px;font-size: 1px;"> </div>
</div>
<div class="column" style="background: #ffffff; Float: left;max-width: 280px;min-width: 280px; width: 280px;text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif; margin-left: auto; margin-right: auto;">
<div style="">
<div style="font-size: 12px;font-style: normal;font-weight: normal;line-height: 19px;Margin-bottom: 20px;" align="center">
<img style="border: 0;display: block;height: auto;width: 100%;max-width: 450px;" alt="some img" width="260">
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px; background: #ffffff;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<h3 style="Margin-top: 0;Margin-bottom: 12px;color: #3b4554; font-family: 'Raleway', Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 0.015em; line-height: 1.15em; text-transform: uppercase; padding: 0 20px;"><strong>Title</strong></h3>
</div>
</div>
<div style="background: #ffffff; Margin-left: 20px;Margin-right: 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p style="Margin-top: 0;Margin-bottom: 20px;">.........</p>
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px;">
<div class="btn btn--depth btn--medium" style="Margin-bottom: 20px;text-align: center;">
<img src="http://www.iuno-projekt.de/media/com_acymailing/templates/newsletter/img/right-arrow-grn.png" alt="icon" />MORE
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px;">
<div style="mso-line-height-rule: exactly;line-height: 15px;font-size: 1px;"> </div>
</div>
</div>
</div>
</div>
</div>
As #N. Ivanov said :
Email templates do not work the same way that would a browser work. You will be best off generating a proper HTML template using the table tag rather than divs.
So for those of you who must use tables in your HTML emails
, I have some information about how they perform across the board. I ran some tests and discovered that, while I couldn’t find a perfect solution, I did manage to collect some useful tips to make your tables behave for the most part.
Table Math, Meet Box-Model Math
So it turns out that when one places table widths, td widths, td padding and CSS padding into a blender, the results are quite chaotic. Inconsistent, to the say the least. Take, for example, the following table:
<table cellspacing="0" height="450" cellpadding="0" border="1px" width="400">
<tr height="100%">
<td width="100" border="1px" height="100%"></td>
<td width="300" border="1px" height="100%"></td>
</tr>
</table>
Just as intended, the resulting width of this table is 400 pixels and the width of the columns are 100 and 300 pixels:
But when some padding is added—via either CSS or HTML—the widths of the columns are compromised:
However, when table width is kissed good bye, the results are not unlike a CSS box model. If padding is added to the original example and the table widthis removed, the code looks like this:
<table cellspacing="0" height="450" cellpadding="10" border="1">
<tr>
<td width="80" height="100%" border="1"></td>
<td width="280" height="100%" border="1"></td>
</tr>
</table>
And, as intended, the resulting widths are correct for both the table and the columns:
But note how the td widths were reduced to accommodate the new padding. This is just like the CSS box model in which 100 pixels wide + 10 pixels padding = 120 pixels total.
**
Nested Tables
**
If a table is nested inside another, the aforementioned rules apply with the exception of a couple important variances:
Yahoo Mail (new), Gmail, Outlook 2007 and Eudora apply extra width to account for borders. But only when they are nested, as the parent table behaves appropriately.
Applying widths to td tags that also have CSS or HTML padding creates confusion across the board. Nearly every client renders the widths in its own unique fashion.
Even without any borders there are variances in width by 2–4 pixels for a nested table with two columns. My tests were inconclusive as to the rhyme and reason behind this unnatural phenomenon. Just know that pixel perfect isn’t an option (unless there is some hidden secret behind this).
source->
Email templates do not work the same way that would a browser work. You will be best off generating a proper HTML template using the <table> tag rather than divs. Further you should only use inline CSS and not use any classes for example bootstrap ones. Hope this helps!
Trying to make a table with 3 horizontal images responsive by adding 100% to the table and then 100% to the images so they re-size according to screen, they previously had image sizes which were set to fit in 960px.
However, the first image is taller than the second - then the third image is smaller than the third.
How can I get these to fit equally and respond to the screen size using this table?
<table align="center" border="0" cellpadding="1" cellspacing="1" style="width: 100%;">
<tbody>
<tr>
<td> <src="http://www.example.com/image/data/Home Page /myfirstitem.jpg" style="border-style:solid; border-width:10px; width: 100%;"></td>
<td><src="http://www.example.com/image/data/Home Page /myseconditem.jpg" style="border-style:solid; border-width:10px; width: 100%;"></td>
<td><src="http://www.example.com/image/data/Home Page /mythirditem.jpg" style="border-style:solid; border-width:10px; width: 100%;"></td>
</tr>
</tbody>
</table>
Divs would be much easier to use instead of tables, as there is much more pre-defined styling in tables that can mess up responsiveness.
div {
padding: 0;
margin: 0 auto;
}
img {
width: 100%;
margin: 0 auto;
}
<div>
<img src="http://placehold.it/350x150" />
</div>
<div>
<img src="http://placehold.it/350x150" />
</div>
<div>
<img src="http://placehold.it/350x150" />
</div>
Let's say i have,
<div style="padding: 15px; width: 100%;">
<div style="margin: -15px;; width: 100%;">
<img src="http://imageshack.us/scaled/landing/51/tigerso.jpg" alt="" style="width: 100%;">
</div>
</div>
The parent div contains 15px padding and - child div wanted to remove this padding by using margin but it does not work. See this fiddle. It's showing me a horizontal scrollbar always.
http://jsfiddle.net/2GJnG/
Remove the width properties of the two div elements:
<div style="padding: 15px;">
<div style="margin: -15px;">
<img src="http://imageshack.us/scaled/landing/51/tigerso.jpg" alt="" style="width: 100%;">
</div>
</div>
See a demo here > http://jsfiddle.net/2GJnG/5/
How to make the div height to 100% so that if i change the div color the whole td color should be changed
<table style="table-layout:fixed;width:100%;" border="1" cellpadding=0 cellspacing=0>
<tr>
<td width="20%" height="70px" align="center">
<div class="step step1" style="display:block;" step="1">
Video<p align="center"> <img id="img1" src="/media/img/accept.png" /><img id="img2" src="/media/img/close.gif" /></p>
</div>
</tr>
</table>
You just need height: 100%; in your styling, like this:
<div class="step step1" style="display:block; height: 100%;" step="1">
You can test it out here. However, you're missing a </td> which will give odd behavior in certain DOCTYPEs (it is valid in some), make sure to close that table cell to be safe. One other note, unless you have it overridden somewhere, there's no need for the display: block;, that's the default display for a <div> element.
Why don't you change the td's color?
div's style:
margin: 0;
padding: 0;
width: 100%;
height: 100%;
border: none;
Why don't you set the td color then?
<td width="20%" height="70px" align="center" style="background-color:Orange;">
<td style="height: 100%"><div style="height: 100%"></div></td> to be explicit, but by default it should be the whole height and width of the td provided the td and table have a height.