I have an HTML email. I want 3 images side by side on a large screen with more then 900px width, like this:
On a mobile phone I would like to have the boxed below each other like this:
I want to achieve this in Gmail app and webbrowser. Unfortunately, I cant use media queries because they are not supported in Gmail app (and in my experience they also didn't work for Gmail web browser): https://www.campaignmonitor.com/css/media-queries/media/
How can I do this? My basic Idea was to use a table like this:
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td align="center">
<table class="my-table-size" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td align="center">
<img style="display: inline-block" src="http://www.my.dev/box.jpg" alt="logo" height="90" >
<img style="display: inline-block" src="http://www.my.dev/box.jpg" alt="logo" height="90" class="middleimage">
<img style="display: inline-block" src="http://www.my.dev/box.jpg" alt="logo" height="90" >
</td>
</tr>
</table>
</td>
</tr>
</table>
But it seems that the "inline-block" style is ignored, because the images are always below each other as in - even if there would be enough space to put them side by side.
I can give the table a fix width like
<table class="my-table-size" width="900px" >
but then it will always have width 900px also on mobile. So it will look on any device like this:
How can I get this to work?
What you're looking for is commonly solved by use of the "fluid hybrid" technique. I'm going to steal from https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919 for this, but it's a very common technique (there are others around too).
The essential code is below:
<div class="three-col" style="font-size:0;text-align:center;">
<!--[if mso]>
<table role="presentation" width="100%" style="text-align:center;">
<tr>
<td style="width:220px;padding:10px;" valign="top">
<![endif]-->
<div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
<div style="padding:10px;font-size:14px;line-height:18px;">
[content goes here]
</div>
</div>
<!--[if mso]>
</td>
<td style="width:220px;padding:10px;" valign="top">
<![endif]-->
<div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
<div style="padding:10px;font-size:14px;line-height:18px;">
[content goes here]
</div>
</div>
<!--[if mso]>
</td>
<td style="width:220px;padding:10px;" valign="top">
<![endif]-->
<div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
<div style="padding:10px;font-size:14px;line-height:18px;">
[content goes here]
</div>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
Now, you can still use media queries to enhance the experience for those email clients that do support embedded <style>s.
So you can add this, as one possible example, in the <head>:
<style type="text/css">
#media screen and (max-width: 350px) {
.three-col .column {
max-width: 100% !important;
}
}
#media screen and (min-width: 351px) and (max-width: 460px) {
.three-col .column {
max-width: 50% !important;
}
}
#media screen and (min-width: 461px) {
.three-col .column {
max-width: 33.3% !important;
}
.two-col .column {
max-width: 50% !important;
}
.sidebar .small {
max-width: 16% !important;
}
.sidebar .large {
max-width: 84% !important;
}
}
</style>
Related
I have created HTML newsletter template and i am using this simple media query but it is not working on gmail IOS app. I have removed all other css from file. I tried #media with screen also
<style>
#media (min-width: 639px) {
.strict-responsive{
background-color: yellow;
width: 50% !important; max-width: 50% !important; display: table-cell !important; margin: 0 auto !important; text-align: center !important;
}
}
#media (max-width: 640px) {
.strict-responsive{
background-color: blue;
width: 100% !important; max-width: 100% !important; display: table !important; margin: 0 auto !important; text-align: center !important;
}
}
</style>
I have added
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml" lang="en">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and HTMLS are below. Links and urls are working and productions based.
<div id="section_1633119029896" class="hse-section">
<div class="hse-column-container hse-border" style="background-color:#ffffff;">
<div id="column_1633119029896_0" class="strict-responsive">
<div id="hs_cos_wrapper_module_16331191216405" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="module">
<table class="hse-image-wrapper" role="presentation" width="100%" cellpadding="0" align="center" cellspacing="0">
<tbody>
<tr>
<td align="center" valign="top" style="text-align:center;padding:10px 15px 10px 10px; font-size:0px;">
<a href="mobile-phones/iphone-13?capacity=128GB&color=Pink&contractTerm=36" target="_blank" data-hs-link-id="0">
<img alt="iPhone 13" src="/iPhone%2013.jpg" style="max-width:100%;font-size:16px;" width="254" align="middle" class="stretch-on-mobile"></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="column_1633119029896_1" class=" strict-responsive">
<div id="hs_cos_wrapper_module_16331191444106" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="module">
<table class="hse-image-wrapper" role="presentation" width="100%" cellpadding="0" align="center" cellspacing="0">
<tbody>
<tr>
<td align="center" valign="top" style="text-align:center;padding:10px 15px 10px 10px; font-size:0px;">
<a href="mobile-phones/iphone-12?capacity=128GB&color=Blue&contractTerm=36" target="_blank" data-hs-link-id="0">
<img alt="iPhone 12" src="/iPhone%2012.jpg" style="max-width:100%;font-size:16px;" width="254" align="middle" class="stretch-on-mobile"></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
I wasn't able to replicate the issue you're seeing, however I did notice you're missing a head tag after the html tag.
With this missing, the background colours weren't rendering which flags that there is an issue.
With/without adding that in, the MQs were still working for me, however one tip would be to format your MQs like this:
#media only screen and (max-width:600px) {...}
Let us know how making these changes work for you.
I am trying to make it so two uneven columns are close together, but I'm not sure where I went wrong while I was writing the code.
When these are entered, the columns span the width of the page, where I would like this to be about 720px total, with the main column being 520px and the secondary column being 200px.
I've tried about 30 different things, changing nearly all the variables, and adding random "align=/:center"'s around all the divs.
I'm not quite sure, and I could really use some help.
I've been working on this the last 5 hours of work, and this needs to be done, I cant quite get it :(
Thank you so much!
<style>
.table { border:0px solid black; padding:10px; max-width:723px; overflow:hidden; }
.left { float:left; width:75%; }
.right { float:right; width:25%; }
</style>
</head>
<body bgcolor="#ffffff">
<center>
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="723">
<tr>
<td colspan="3"><img name="gala_r1_c1" src="/images/gala_r1_c1.jpg" width="720" height="42" border="0" alt=""></td>
</tr>
<tr>
<td colspan="3"><img name="gala_r2_c1" src="/images/gala_r2_c1.jpg" width="720" height="283" border="0" alt=""></td>
</tr>
</table>
</center>
<div class="table">
<div class="left">
<h1>From the President</h1>
<p></p>
<p>Dear Friends,</p>
blah
</div>
<div class="right">
<h1>From Students</h1>
-"<b>derp"<br>
</b>
</div>
</div>
</center>
{embed="embeds/global_footer"}
</body>
</html>
left .table { border:0px solid black;
padding:10px;
max-width:723px;
overflow:hidden;
margin:0 auto; }
So, add margin:0 auto; to the table class.
Update:
<style type="text/css">
<style>
Remove one of them... :)
Instead this:
<div class="right"> <div class="right" padding-right="100px"> <h1>From Students</h1> -"<b>derp</b> </div> </div>
try with this:
<div class="right"> <div style='padding-left:15px'> <h1>From Students</h1> -"<b>derp</b> ....</div> </div>
There are 3 changes you will need to make:
1) MOST IMPORTANT - you need a doctype! Otherwise this pushes the browser into quirks mode and into otherwise no man's land. Always include this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2) Remove the dangling </center> tag at the bottom.
3) Add margin: 0 auto; as the gentleman before me posted. This the css equivalent to the html <center> tag.
Final results:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Float center</title>
<style>
.table { border:0px solid black; padding:10px; max-width:723px; overflow:hidden; margin: 0 auto;}
.left { float:left; width:75%; }
.right { float:right; width:25%; }
</style>
</head>
<body bgcolor="#ffffff">
<center>
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="723">
<tr>
<td colspan="3"><img name="gala_r1_c1" src="/images/gala_r1_c1.jpg" width="720" height="42" border="0"
alt=""></td>
</tr>
<tr>
<td colspan="3"><img name="gala_r2_c1" src="/images/gala_r2_c1.jpg" width="720" height="283" border="0"
alt=""></td>
</tr>
</table>
</center>
<div class="table">
<div class="left">
<h1>From the President</h1>
<p></p>
<p>Dear Friends,</p>
blah
</div>
<div class="right">
<h1>From Students</h1>
-"<b>derp"<br>
</b>
</div>
</div>
{embed="embeds/global_footer"}
</body>
</html>
Snapshot:
Okay so I've been trying to position these 4 divs for about 6 hours now. The routes box is suppose to take up whatever height is left between the navigation and info divs, wasn't quite sure how to say that. If someone could help me out or point me in the right direction I would really appreciate it.
http://i.stack.imgur.com/41q3H.png
current code is at 98.214.131.200/new.php & 98.214.131.200/defualt.css
<div>
<div style="background-Color:black;height:35px"></div>
<div style="width:30%;float:left;height:500px">
<div style="height:50%;background-color:green;width:100%"></div>
<div style="height:50%;background-color:blue;width:100%"></div>
</div>
<div style="width:70%;float:right;height:500px;background-color:red"></div>
</div>
set the height:350px; of class .routes it may help you.
As Below:
.routes {
background: none repeat scroll 0 0 #0000FF;
height: 350px;
width: 300px;
}
JSFIDDLE:http://jsfiddle.net/beABW/
<div class="navigation"></div>
<div class="content">
<div class="firstCol">
<div class="routes"></div>
<div class="info"></div>
</div>
<div class="secondCol">
<div class="google_map"></div>
</div>
</div>
In your style.css
.navigation{
height:35px;
width:100%;
}
.content{
width:100%;
}
.firstCol{
float:left;
width:300px;
height:auto;
}
.routes{
width:300px
height:auto;
}
.info{
width:300px
height:200px;
}
.secondCol{
float:left;
width:auto;
height:auto;
}
.google_map{
width:auto;
height:auto;
}
Assuming you do not know the height initially you will need to do this programmatically by getting the height of Google Map minus the height of info and then setting routes to that height. Example here. Or you can use a table :-(
.class1
{
float:left;
}
#one
{
height:35px;
width:100%;
border:1px solid red;
}
#two
{
height:200px;
width:300px;
border:1px solid red;
}
#three {
border: 1px solid Green;
height: 403px;
}
#four
{
height:200px;
width:300px;
border:1px solid red;
}
#lftpanel {
float: left;
width: 300px;
}
#rgtpanel {
float: left;
width: 808px;
}
<div id="mainDIv">
<div id="one" class="class1">
</div>
<div id="lftpanel">
<div id="two" class="class1">
</div>
<div id="four" class="class1">
</div>
</div>
<div id="rgtpanel">
<div id="three" class="class1">
</div>
</div>
</div>
Here's an example for a table solution (not very W3C but the solution will work in older browsers, too) :
<table width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td colspan="2">Header
</td>
</tr>
<tr>
<td width="300px">
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td width="100%">topleft</td>
</tr>
<tr>
<td width="100%" height="200px">bottomleft</td>
</tr>
</table>
</td>
<td height="1000px">right</td>
</tr>
</table>
I tried this before, but doesn't work:
<table width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td colspan="2">Header
</td>
</tr>
<tr>
<td width="300px">topleft</td>
<td rowspan="2">right</td>
</tr>
<tr>
<td width="300px" height="200px">bottomleft</td>
</tr>
</table>
Using flex-boxes may be what you are after. Flex-boxes can be used to stretch/grow a div to fill it's parent while taking into account other children of it's parent. I have an example here of it doing what I believe your asking for.
Note: I'm not sure what browser versions this works in.
I edited khurram's answer, the trick is, float everything and to take up whatever space is left use overflow:hidden (no float!)
Edit:
http://jsfiddle.net/hashie5/v4jFr/
I am working on website and designing a master page gave some fixed pixels to table layout but getting issues while seeing that page on 1600 X 900 pixels. Then trying into percentage stuff.
create a table and divide that table into columns and gave 40% to first and last column (to st background) because i want my main content table into middle of the screen and gave hardcoded 970px but still getting issues with layout stuff. Last column looks 60% of total screen.
can we set column width dynamically depends on screen resolution ? or some specific solution please suggest..
Hope this is what you are looking for
<body>
<form id="form1" runat="server">
<div style="background-color: Black; width: 100%; height: 680px;">
<div style="width: 970px; margin: 0 auto;padding:0px">
<div style="width: 25%; height: 675px; float: left; background-color: Blue;">
</div>
<div style="width: 75%; height: 675px; float: right; background-color: white">
<div style="width: 75%; height: 675px; float: left; background-color: red">
</div>
<div style="width: 25%; height: 675px; float: right; background-color: Green">
</div>
</div>
</div>
</div>
</form>
Hope it helps
Media queries could solve your problem, take a look at this:
CSS3 Media Queries
You can use different CSS depending on the screen resolution, hope it helps.
With tables
<body>
<form id="form1" runat="server">
<div style="background-color: Black; width: 100%; height: 680px;">
<div style="width: 970px; margin:0 auto;padding:0px">
<table width="100%" style="margin:0px" cellpadding="0" cellspacing="0">
<colgroup width="100%">
<col width="25%" />
<col width="50%" />
<col width="25%" />
</colgroup>
<tr>
<td style="height:680px; background-color:Aqua">
</td>
<td style="height:680px; background-color:Green">
</td>
<td style="height:680px; background-color:Maroon">
</td>
</tr>
</table>
</div>
</div>
</form>
how to stretch a DIV vertically inside a table-cell?
I thought height: 100% would be fine
but in some situations - it isn't (at least in IE8)
here is a simple example:
a 3-row table, with a header, a content, and a footer;
I would like the 'content' DIV inside the 'content' cell to stretch 100% vertically;
it does in FF and Chrome, but not in IE8
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<div style="overflow: auto; height: 20em; width: 20em;">
<table style="height: 100%; width: 100%;">
<tr style="background-color: blue;">
<td>
<div>header</div>
</td>
</tr>
<tr style="height: 100%;">
<td style="background-color: yellow;">
<div style="height: 100%; background-color: red; overflow-y: scroll;">
content
</div>
</td>
</tr>
<tr style="background-color: blue;">
<td>
<div>footer</div>
</td>
</tr>
</table>
</div>
http://jsfiddle.net/mWMmy/14/
could anyone suggest a solution to this simple problem?
it has to work in IE8, FF any Chrome (IE7 and older is not important)
and it has to be CSS-based (no javascript)
please, do not suggest wisdoms like 'dont use tables for layout', as I could use DIVs with display: table, etc. - the problem is the same (I used TABLE, TR, TD in the example because it is more readable this way)
you can remove the div content from middle td and make style to middle td to be scrolled
like that
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<div style="overflow: auto; height: 20em; width: 20em;">
<table style="height: 100%; width: 100%;">
<tr style="background-color: blue;">
<td>
<div>header</div>
</td>
</tr>
<tr style="height: 100%;">
<td style="background-color:yellow;overflow-y:scroll;vertical-align:top;">
content
</td>
</tr>
<tr style="background-color: blue;">
<td>
<div>footer</div>
</td>
</tr>
</table>
</div>
and that for your question but the total height is the height for the parent div as you set to height: 20em;
so if you want to make an application to fill browser client with autoheight
you have only two ways
1- Using Frameset like that
<frameset ROWS="100px,*,100px">
<frame src="header.htm" />
<frame src="content.htm" />
<frame src="footer.htm" />
</frameset>
that will make auto height without javascript,
2- Using Javascript
My Regards
All you need to do is put a hard/fixed height on the td and a height of 100% on the div in the td.