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.
Related
I am creating a mobile e-mail template (means no javascript) which has to be responsive.
I want to place several images inline, which are scaled down as the screen gets narrower. I did this by using css table and table-cell, and let the image scale. No problem so far.
However, since images are often blocked by e-mail clients, I was requested to create a kind of placeholder in grey, showing the image "alt text" when the image is not loaded. I want this placeholder to be of the same size as the contained image, and to scale at narrower widths too.
I got quite far, as you can see in the following fiddle: http://jsfiddle.net/ow7c5uLh/29/
HTML:
<div class="table">
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
</div>
CSS:
.table {
display: table;
table-layout: fixed;
width: 100%;
}
.table-cell {
display: table-cell;
text-align: center;
padding: 0 5px;
border: 1px dotted black;
}
.placeholder {
max-width: 120px;
max-height: 60px;
margin: auto;
background-color: #505050;
color: #FFFFFF;
}
img {
max-width: 100%;
height: auto;
}
However, there are two problems:
As the screen gets narrower and the images are scaled, the background-color pops out from under the image. The placeholder-div is scaling just as the image, but its height is calculated (by the browser) to be some 5px more then the image height. Where does that difference come from?
When the images are not loaded (try in the fiddle by just making the image URL invalid) then the placeholder-div's height collapses. How can I make it keep the correct height?
FYI: The actually used images won't always be of the same size, but I will know their dimensions and can calculate their aspect-ratio. I would write those values (like 120px) inline instead of in a separate css-file like in the example.
Thanks in advance for any help!
Add display: block to your CSS img rule to make it a block element instead of inline and you are good to go: Fiddle
Change src="...." of one of them to src="" in the fiddle and you will see the the cell itself already scales.
By adding rule img[alt] { font-size: 2vw; overflow: hidden } to your CSS, the html alt="text" will scale too. overflow: hidden chops excess text when alt is larger than your 120x60px.
(note: [alt] is called an 'attribute' in CSS, search for 'css custom attribute' should you want to learn to create your own.)
See updated Fiddle
I would advise against loosing the width and height rules of the placeholder, but you could change it to min-height/min-width to show at least that something 'is missing'. Or change to max-width: 100% and remove max-height, but this depends on your requirements. You will need to limit the size of an image somewhere up or down the line (for example giving the table a width in px and it's children a (max-)width in % ).
Remove:
img {
height: auto;
}
problem-1 & 2:
img {
max-width: 100%;
max-height: 100%;
}
I'm making a basic header using divs and a nested img in a fluid layout. I'm a bit rusty on this and i can't for the love of me figure out how to ensure that the image nested in the div scales without scaling to the point where it becomes smaller its parent div.
EDIT: Updated the codepen link showing how using min-height won't work as it squeezes the image
HTML:
<div class="container">
<div class="item half">
<p>
Some text
</p>
</div>
<div class="item half">
<img src="http://dummyimage.com/hd1080" class="full-width">
</div>
</div>
CSS:
.container{
margin: 0 auto;
max-width: 1920px;
}
.item{
height: 300px;
float:left;
overflow: hidden;
background-color: gray;
}
.half{
width: 50%
}
.full-width{
max-width: 100%;
}
And for good measure a quick illustration of what is happening:
And an illustration of what i want to happen:
Edit: Note that the image here is not being squeezed, which is what happens if you set the image to have a min-height equal to its parent div. But rather the overflow is hidden. You can also see that i do not mind the images being cropped.
Any help appreciated.
You can add min-height equal to the div.item height to your image CSS
img {
max-width:100%;
min-height:300px;
}
I've managed to find the solution i wanted in this thread. The function i was looking for was object-fit.
I've used the following solution:
img{
min-height: 100%;
object-fit: cover;
}
Edit: quickly found out that this property is only properly supported by Firefox, Chrome and Opera. Use this polyfill to fix this on Safari and IE.
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>
I need to do smth like this:
Left box should have static width and right one resizes to full browser width.
Height of the boxes also should be resizeable.
P.S.
Sorry guys, it took a while to make fiddle work.
So it is here
<div class="page-wrapper">
<div class="search-wrapper">
</div>
<div class="content-wrapper">
<div class="leftPage">
</div>
<div class="rightPage">
</div>
</div>
</div>
The problem is:
I have silver left page. I want it to have static width. Lets say 454px.
And I want right page (black one) to be dynamically resized to screen.
Variant with width 20%/80% is not good for me.
Is it possible with CSS only?
I got good answers with jquery/js but still interesting if it can be done with CSS only)
Sorry for troubles)
Javascript/jQuery
If you want left column to be static and the right column to be dynamic, you will need Javascript or a CSS preprocessor like SASS. That's the only real solution that is supported by older browsers.
// parent width - leftpage width = remainings
$('div.rightPage').width(
$('div.rightPage').parent().width() - $('div.leftPage').width()
);
Fluid layout
If you really want a pure-CSS solution, I suggest to use a fluid layout instead. This is cross-browser as well.
div.leftPage { width: 25%; }
div.rightPage { width: 75%; }
Simulated table
As alternative, you can still simulate a table layout using display: table. Tables do have that functionality. Check out the demo (resize the window to see it working)
This may not work in IE6 and IE7.
Native table
In the end, if you are OK with tables, you can use native tables, which are cross-browser ;)
CSS
table td.fixed { width: 200px; }
HTML
<table>
<tbody>
<tr>
<td class="fixed">
<p>Left content</p>
</td><td>
<p>Right content</p>
</td>
</tr>
</tbody>
</table>
Finally, in order to resize it vertically, you need to set resize: vertical.
div.leftpage, div.rightpage { resize: vertical; }
Using table is much easier.
HTML
<div class="page-wrapper">
<div class="search-wrapper">
</div>
<table class="content-wrapper">
<tr>
<td class="leftPage">LEFT</td>
<td class="rightPage">RIGHT</td>
</tr>
</table>
</div>
CSS
table
{
width:100%;
}
.leftPage
{
width: 454px;
}
Unless you really want to stick with DIVs?
Try using absolute position at a relative container and have your right div position at left the same amount of pixels as your left width. Like below:
div.content-wrapper {
height: 100%;
width: 100%;
position:relative;
}
div.leftPage {
background-color: black;
height: 100%;
width: 454px;
position:absolute;
}
div.rightPage {
background-color: red;
height: 100%;
width: 100%;
position:absolute;
left:454px;
}
Also its good to set the body height at 100% if you want your divs to expand across the page:
body, html {
width:100%;
height:100%;
}
And here's the demo: http://jsfiddle.net/XLLSA/1/
EDIT
I fixed the search div: http://jsfiddle.net/XLLSA/2/
Try this..
div.left {
width: 20%;
min-width: 200px;
}
div.right {
width: 80%;
}
I am trying to get the following code to work without the 670px hardcoded into the app:
<tr>
<td height="100%">
<div id="navigation" class="navigation">
<jsp:include page="menu.jsp" flush="true"/>
</div>
</td>
<td>
<div style="height:670px; overflow: auto; width:100%;">
<jsp:include page='dynamicContent.jsp' flush="true"/>
</div>
<div>
<center><jsp:include page="footer.jsp" flush="true" /></center>
</div>
</td>
</tr>
It renders fine in IE7 before a window resize - the content pane scrolls with the footer at a fixed height above the page bottom.
However, this stops working (for obvious reasons) when I make the window smaller as I have the HTML of the page set to use overflow:hidden.
Unfortunately, using "height:75%" doesn't seem to be compatible with overflow in IE7.
Does anyone have any idea how I might fake this for IE7 (it needs to be compatible with IE7 cause of project requirements)? Unfortunately this code is pretty embedded so using CSS positioning instead of a table is also probably more work than we will be able to handle before our next release.
Get rid of the overlow: auto, the overlow: hidden, and the fixed height. Instead give your footer a fixed position and add a bottom margin to the body the height of the footer.
body
{
margin-bottom: 100px;
}
.footer
{
position: fixed;
bottom: 0;
height: 90px;
padding-top: 10px;
background-color: #fff;
}
Make sure to set a background for the footer, or else the page content can show through.
Here's a working live example: http://jsfiddle.net/ADpMs/