I designed a responsive email with several elements, each one with a main image.
To prevent images breaks in iphone resolution and higher, I have:
img { max-width: 320px !important; height: auto !important; }
But then, images that are smaller than 320px scale to this width. I fixed that with:
img { max-width: 100% !important; width: auto !important; height: auto !important; }
This works for the main images, but then the business logo resizes to 100% of its parent container.
How I get the best of each solution?
HTML coding for emails is a PAIN
See this chart: https://www.campaignmonitor.com/css/ (you might have to scroll down the page, but it's there)
There is really little to no consistency between email clients as to what they will recognize. I would recommend just coding a simple page that 'squishes' nicely.
First, your style will applied to all images, including your logo. Since you don't have specific class for images. Second, for email template you should use inline styles and using table for layouts. Example:
<table style="width: 100%; max-width: 600px; margin: 0 auto;">
<tr>
<td>
<img src="main.jpg" style="width: auto; max-width: 100%">
</td>
</tr>
<tr>
<td align="center">
<img src="logo.png">
</td>
</tr>
</table>
Related
I have a table cell of unknown height which contains an img. This img has a fixed pixel width, but I need it to stretch to fill (but not exceed) the entire height of the table cell. The width should remain the same no matter what the height.
Usually, I'd do this using height: 100%, but this doesn't appear to be working in this scenario:
img {
display: block;
width: 25px;
height: 100%;
}
<table>
<tr>
<td>
Here is some content.<br/>
I would like the adjacent image to stretch to be<br/>
the same height as it, but not have the image get<br/>
any wider.
</td>
<td>
<img src="https://placehold.it/20x20" />
</td>
</tr>
</table>
How can I make the image fill the height of its cell?
Consider the image as background and you can easily achieve this. You can also keep the background-image as an inline style to be able to set it like an img element
.img {
width: 25px;
background-size:100% 100%;
}
<table>
<tr>
<td>
Here is some content.<br/>
I would like the adjacent image to stretch to be<br/>
the same height as it, but not have the image get<br/>
any wider.
</td>
<td class="img" style="background-image:url(https://placehold.it/20x20)">
</td>
</tr>
</table>
In case you want to keep the use of img you can use position:absolute
.img {
width: 25px;
position:relative;
}
.img img {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
<table>
<tr>
<td>
Here is some content.<br/>
I would like the adjacent image to stretch to be<br/>
the same height as it, but not have the image get<br/>
any wider.
</td>
<td class="img">
<img src="https://placehold.it/20x20)"/>
</td>
</tr>
</table>
With email clients such as Outlook desktop 2007-2019, you need to specify the width of the image, especially if you are displaying it in a size that does not match it's physical size. Otherwise Outlook will ignore your style sheet and revert to the actual size.
For the height, you can generally leave it blank and add in the style sheet height: auto;
<img src="https://placehold.it/20x20)" width="20" height="" alt="" border="0" style="height: auto;">
Good luck.
I'm using MadMimi for email promotions. So far, my emails look consistent across all browsers and devices, including iOS on iPad (in the Mail app). There is, however, a weird resizing issue with images on iOS on the iPhone (again, the Mail app). See the CSS and screenshot below. As you can see, the image bursts out of the width of its parent element. Does anyone know why this happens or how to correct it? Thanks.
CSS:
.outer-wrapper {
width: 600px;
max-width: 100%;
margin: 0 auto;
}
.inner-wrapper {
width: 100%;
border-radius: 10px;
overflow: hidden;
background-color: white;
border: 1px solid #dddddd;
}
img {
width: 600px;
max-width: 100%;
height: auto;
}
HTML:
<body>
<div class="outer-wrapper">
<div class="browser">Email look weird? Be sure to enable images, or view it on the web here.</div>
<div class="inner-wrapper">
<img src="http://pintsizedtreasures.com/newsletters/header-2.jpg">
<div class="body-wrapper">
[content...]
</div>
</div>
</div>
</body>
I found the answer by trial and error. I had reversed the values for .outer-wrapper max-width and width. The correct CSS should read:
.outer-wrapper {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
What I think is happening is that when the user is on an iPhone, there is less than 600 pixels in the viewport, so the renderer is falling back to max-width for .outer-wrapper. And since it is set to 100% and not a declared pixel value, the img 100% width is falling back to the viewport width, not its parent width. All other browsers have a viewport larger than 600px, which is a declared pixel value, and the problem doesn't occur (iPad, desktop, etc.). Stupid oversight of mine, apparently.
This is how it's supposed to look.
Since the image states 100% it will take up the whole width. If you want it to be the same width as the letter you should move it inside that div tag. I'm assuming it is not since I can not see the html code.
If you have a specific css section for different devices you can change it there. Or another option is to create a css class just for this ios device and edit the width there so you will not change the rest of the working devices.
If you use the table with nested div approach you should fix the inline style syntax.
<table>
<tr>
<td>
<div style="width:100%; max-width: 600px">
<img src="url/file.jpg" alt="image description" />
</div>
</td>
</tr>
</table>
Use tables `
<table>
<tr>
<td>
<div style="width=100%">
...your content
</div>
</td>
</tr>
</table>
`
Its worked for me.
I have a one-row table that is centered within a div. Two of the columns (i.e. cells) are filled with the name of a team and a round. I simply can't find a way to make the size of these columns correspond to the length of e.g. the team name.
The HTML code is:
<div id="greeting">
<table id="t03">
<colgroup>
<col style="width: auto;">
<col style="width: auto;">
<col style="width: auto;">
<col style="width: auto;">
</colgroup>
<tr style= "height: 30px; width:auto;">
<td> Welcome, Team</td>
<td id="teamnamehere"></td>
<td> Please Make Your Decisions for Round</td>
<td id="roundnumberhere"></td>
</tr>
</table>
</div>
The corresponding CSS is:
#greeting {
position: absolute;
top: 385px;
width: 980px;
margin: auto;
}
table#t03 {
width: 65%;
margin: auto;
font-family:verdana;
font-size:18px;
font-color: #000000;
background-color: #FFFFFF;
}
Thanks for any help!
The problem comes from trying to use a table for wrong purposes - they should only be used for data that genuinely needs a tabular layout to understand it. Use two divs instead, and make them inline-block in the CSS:-
div { display : inline-block}
and that will both show them side by side on one line and allow the divs to adjust their size to the length of text.
It has the additional advantage of being Responsive, so if you have an exceptionally long name or text too large to fit on a mobile phone screen, the second div will automatically drop to the line below!
If you remove width: 65%; from table#t03, it will have the width of its content.
I'm making a web-based calculator, which I styled with CSS. Now I want to make this responsive so it is usable on smartphones. The following is a part of my HTML
<table class="buttonTable">
<tbody>
<tr>
<td>
<input class="button_standard" type="button" value="7"></input>
</td>
<td>
<input class="button_standard" type="button" value="8"></input>
</td>
<td>
<input class="button_standard" type="button" value="9"></input>
</td>
<td>
<input class="button_operator" type="button" value="รท"></input>
</td>
</tr>
<tr>
<td>
<input class="button_standard" type="button" value="4"></input>
</td>
<td>
<input class="button_standard" type="button" value="5"></input>
</td>
...
</tr>
...
</table>
What I'm trying to achieve for screen sizes of about 450px and below is that the buttons become reponsive, and start using percentages (it would be weird to use percentages for desktop screen sizes, as it would then create buttons with widths of about 500px).
This is a picture of what it looks like on desktops or other large screens (alot of the surrounding white has been cut away):
I have my CSS set up as follows (showing only relevant things):
table {
text-align: center;
margin: 10px auto;
}
td {
width: 70px;
height: 50px;
padding: 2px;
}
input[type="button"] {
width: 100%;
height: 100%;
...
}
#media (max-width: 450px) {
td {
width: 25%;
}
...
}
As I want the buttons to be 25% of the whole screen each, I set the width to 25%. You would expect the buttons to be 25% each, so covering the whole screen but with a margin of 2px. This is what happens instead:
What am I missing that causes this? I already tried styling the buttons themselves (the input[type="button"] elements) with the width of 25% but that was even worse.
What's interesting is that when the screen width hits the table width like shown above, the elements actually do change dynamically until they hit their minimum width defined by the text inside and such.
I really don't understand what's going on here.
The problem is with the table element. It doesn't know how wide to be, so it will make itself as small as possible, and then the tds will be 25% of the table's width.
Change the width of the table to be 100%, and you will be good.
I would change the table to be full width of the parent, as well as the input, and then put a max-width of say 25em-30em on the parent.
That would look something like this:
table, input {
width:100%;
}
main {
max-width: 27.5em;
margin: 0 auto;
padding: 0 1em; // for mobile
}
I wrote a Django application, where different (random) online images are put in :
<img src={{j.5}} width="150" height="150" border="0">
It works fine for most of the images, but some of them, which have high dimensions, do not show on my page. I tried with CSS:
img {max-width: 100%;max-height: 100%;}
But is not functioning. Since the pictures are selcted randomly, I want to make image to scale downwards. For example this image won't resize:
http://www.civitas.al/wp-content/uploads/2013/11/atentati-2111.jpg
Any idea?
Technically (you did not provide pictures), using consistent width and max-width both as CSS styles will remove possible conflicts between the DOM's idea of tag width and element width. This means
<img src={{j.5}} />
And
img {width: 150px; height: 150px; max-width: 100%; max-height: 100%; border: 0;}
are working for me.