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.
Related
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>
I am following an in-line style method to develop this layout. When I make it responsive, the body and footer content is not getting aligned. As you can see in the image shared on the link, contents are not well aligned when it is responsive:
and here's my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Throttle Up Coaching</title>
</head>
<style type="text/css">
#media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
body{width: 400px;}
.gutter img p{width: 400px;}
.content{width: 400px;}
.social-connect {width: 100%;}
}
</style>
<body bgcolor="#EEE">
<div class="content">
<table width="646" cellspacing="0" cellpadding="0" style="color: #D8D8D8; text-align: left; border-collapse: collapse; border-spacing: 0; margin: 0 auto; border: 0;">
<tr>
<td colspan="3" style='color: #fff; margin: 0 auto; padding: 0; font: bold 12px/28px "Trebuchet", "Trebuchet MS", serif;' align="center" bgcolor="#D8D8D8" valign="top">
<a style="color: white; text-decoration: none;" href='/emailer'>CLICK TO VIEW THIS EMAIL IN YOUR BROWSER</a>
</td>
</tr>
<tr>
<td class="gutter" width="60" style="color:black; font-weight: normal; margin: 0;" align="left" bgcolor="#fff" valign="top">
<img src="https://i.ibb.co/bPKhXJG/logo.png" align="top" width="200" style="padding: 30px 40px;">
<img src="https://i.ibb.co/0J1Tdqv/background-image.png" border="0" width=100%>
<div style="padding-left: 50px; padding-right:50px; line-height: 30px;">
<p >My Matching Interview has enrolled you in an interview<br>
<h1 style="font-size: 20px; font-weight: bold;">Sprint: Solve Big problems and test ideas in just five day</h1>
access and complete your interview
</p><br>
COMPLETE YOUR INTERVIEW
<br><br>
<hr>
<p style="font-size: 14px; color: #7A7A7A; line-height: 2; padding-right: 50px;">If you have any questions, please contact support#throttleupcoaching.com or call to our toll free number <b style="color: #000;">+372 800 1800</b></p><br>
</div>
</td>
</tr>
</table>
</div><br><br>
<div class="social-connect" style="font-size: 13px; text-align: center; color: #7A7A7A;">
<table align="center" style="display:inline-block;">
<tr>
<td>
<img src="https://i.ibb.co/Xytf49L/icon-48.png" height="24" alt="LinkedIn">
<img src="https://i.ibb.co/cDyVv3r/icon-49.png" height="24" alt="Facebook">
<img src="https://i.ibb.co/QFpjGhH/icon-50.png" height="24" alt="Google plus">
<br><br><br>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; font-size:12px; font-weight:400; line-height:22px; color:#445566;">
You are receiving this email advertisement because you registered with Throttle Up Coaching by<br>
Javelin Corporation® All Rights Reserved.(123 Main Street, Austin, TX 78701) and agreed to<br>
receive emails from us regarding new features, events and special offers.<br><br>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;font-weight:bold;line-height:16px;text-align:center;color:#445566;">
<a class="footer-link" href="#" target="_blank" style="color: #888888;">Privacy</a>
<a class="footer-link" href="#" target="blank" style= "color:#888888;">Unsubscribe</a>
</div>
</div>
</td>
</tr>
</table>
</div><br><br>
</body>
</html>
Any help to fix this issue will be greatly appreciated. Thank you!
There were a few things (I think) was wrong with your HTML.
Body of the mobile device was set to 400px
content was set to 400px
I have added a new class container to change the width of the outer table on mobile devices.
Below is the update code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Throttle Up Coaching</title>
</head>
<style type="text/css">
#media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
.social-connect {width: 100%;}
.container{width:100% !important;}
}
</style>
<body bgcolor="#EEE">
<div class="content container">
<table width="646" cellspacing="0" cellpadding="0" style="color: #D8D8D8; text-align: left; border-collapse: collapse; border-spacing: 0; margin: 0 auto; border: 0;" class="container">
<tr>
<td colspan="3" style='color: #fff; margin: 0 auto; padding: 0; font: bold 12px/28px "Trebuchet", "Trebuchet MS", serif;' align="center" bgcolor="#D8D8D8" valign="top">
<a style="color: white; text-decoration: none;" href='/emailer'>CLICK TO VIEW THIS EMAIL IN YOUR BROWSER</a>
</td>
</tr>
<tr>
<td class="gutter banner" width="60" style="color:black; font-weight: normal; margin: 0;" align="left" bgcolor="#fff" valign="top">
<img src="https://i.ibb.co/bPKhXJG/logo.png" align="top" width="200" style="padding: 30px 40px;">
<img src="https://i.ibb.co/0J1Tdqv/background-image.png" border="0" width=100%>
<div style="padding-left: 20px; padding-right:20px; line-height: 30px;" class="">
<p >My Matching Interview has enrolled you in an interview<br>
<h1 style="font-size: 20px; font-weight: bold;">Sprint: Solve Big problems and test ideas in just five day</h1>
access and complete your interview
</p><br>
COMPLETE YOUR INTERVIEW
<br><br>
<hr>
<p style="font-size: 14px; color: #7A7A7A; line-height: 2; padding-right: 50px;">If you have any questions, please contact support#throttleupcoaching.com or call to our toll free number <b style="color: #000;">+372 800 1800</b></p><br>
</div>
</td>
</tr>
</table>
</div><br><br>
<div class="social-connect" style="font-size: 13px; text-align: center; color: #7A7A7A;">
<table align="center" style="display:inline-block;">
<tr>
<td>
<img src="https://i.ibb.co/Xytf49L/icon-48.png" height="24" alt="LinkedIn">
<img src="https://i.ibb.co/cDyVv3r/icon-49.png" height="24" alt="Facebook">
<img src="https://i.ibb.co/QFpjGhH/icon-50.png" height="24" alt="Google plus">
<br><br><br>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; font-size:12px; font-weight:400; line-height:22px; color:#445566;">
You are receiving this email advertisement because you registered with Throttle Up Coaching by<br>
Javelin Corporation® All Rights Reserved.(123 Main Street, Austin, TX 78701) and agreed to<br>
receive emails from us regarding new features, events and special offers.<br><br>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;font-weight:bold;line-height:16px;text-align:center;color:#445566;">
<a class="footer-link" href="#" target="_blank" style="color: #888888;">Privacy</a>
<a class="footer-link" href="#" target="blank" style= "color:#888888;">Unsubscribe</a>
</div>
</div>
</td>
</tr>
</table>
</div><br><br>
</body>
</html>
I want to convert one HTML template into PDF file, I am doing this in nodejs by using one npm module with name "dynamic-html-pdf", content of the HTML is not fixed and so dynamic, I have given border to parent div in html which I want it to apply to each page of pdf file.
But its applying in left and right sides only and ending in last page .See the below Image.
I want it to apply on each page as a border box to each page
Also, I want to apply some background icon so I had applied it to body tag but for only first page of pdf it is getting instead of all pages.
what CSS or anything I need to change???
<!doctype html>
<html style="height:100%;">
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>letter</title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
</style>
</head>
<body style="width: 100%;height:100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust:100%;overflow:hidden;margin: 0;font-family: Arial,Helvetica Neue,Helvetica,sans-serif;">
<div style="height:100%;background: linear-gradient(#2bd9b8, #659bff); background-repeat: no-repeat;padding:18px;">
<div style="height:100%;background:url(https://img.icons8.com/wired/64/000000/turtle.png)center center no-repeat;background-size: 20%;background-color: #fff;padding: 20px;">
<h1 style='margin-bottom: 0;font-size: 18px;'>abcde</h1>
<br />
<p style='margin: 0;float: left;font-size: 11px;width:100%;word-break: normal'>
India</p>
<br clear='all' />
<p style='margin: 0;float: left;font-size: 11px;'><b>Registration No.</b><br /></p>
<br clear='all' />
<p style='margin: 0;margin-top: 30px;font-size: 11px;'>11-Apr-2019</p>
<h1 style='color: #2bd9b8;text-align: center;margin-bottom: 30px !important;font-size:30px'>Letter</h1>
<p style='margin: 0;font-size: 13px;'>To,</p>
<p style='margin: 0;font-size: 13px;'>All People</p>
<p style='margin-top: 15px;margin-bottom: 15px;font-size: 13px;'><b>Subject : Letter</b></p>
<div style='min-height: 200px;line-height: 18px;font-size: 13px;font-weight: normal; text-align:justify;font-family: Arial,Helvetica Neue,Helvetica,sans-serif;'>Lorem PageMaker including versions of Lorem Ipsum</div>
<div style="position:absolute;left:35px;right:35px;bottom:30px;">
<p style='text-align: right; font-size: 14px'>User 123</p>
<p style='text-align: right; margin:5px 0 5px 0;font-size: 12px'>Secretary</p>
<p style='text-align: right; margin:50px 0 0 0;font-size: 12px'>Powered by <img src='https://img.icons8.com/wired/64/000000/turtle.png'
alt='logo' style='height: 20px;margin-left: 5px;' class='logo-footer' title='logo' /></p>
</div>
</div>
</div>
</body>
</html>
I am expecting the border and background icon should come for all the pages of generated pdf file
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="col-sm-3">
<div class="panel panel-default">
<div class="panel-body" style="height:350px; background-color:#fff; border-color:#66cfff; border-style:solid; border-width:1px;padding:0px; overflow:auto;">
<div style="background-color: #0096db!important; padding: 10px 10px 30px 10px; align-items:stretch;">
<div style="float:left; vertical-align:middle">
<h2 style="color: #ffffff !important; text-align: left; font-size: 16px;font-family:Helvetica; font-weight: bold;">Last Payment</h2>
</div>
<div style="float:right ; vertical-align:middle">
<h5>
<a style="cursor:pointer; font-size:13px; color:#ffffff !important; font-weight:bold;" [routerLink]="['/historicPayments']">
View All
</a>
</h5>
</div>
</div>
<table class='table' style="margin-top:10px;">
<thead class="box-heading">
<tr class="row-style">
<th width="16%" style="vertical-align:top">Property/ Agreement ID</th>
<th width="20%" style="vertical-align:top">Property/ Agreement Name</th>
<th width="12%" style="vertical-align:top">Project ID</th>
<th width="20%" style="vertical-align:top">Project Name</th>
<th width="12%" style="vertical-align:top">Check Date</th>
<th width="12%" style="vertical-align:top">Check Amount</th>
<th width="8%" style="vertical-align:top">Invoice</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</body>
</html>
How to stretch the div tag to be equal to table's width. Please see the screenshot. Currently there is white space showing at the end
Please check the updated code. I see it showing the white space at the end of header lable when we move the horizontal bar. Please test this code on w3c school site.
Give percentage value for width attribute.
.example { width:50%; background:green;}<div class="example">HAVE FUN!</div>
Try using width:100%; display:block;
This will help you to make your div 100%
Apply your div with display:table; css.
For example your div class is .box1 then css will be:
div.box1 {width:100%; display:table;}
I assume table width is 100% too.
I have a Bootstrap responsive table which is within a div with the CSS display:table. This seems to be preventing the table from becoming responsive. How can I make the table responsive without changing the outer CSS?
JsFiddle
For reference, display:table is used to create a "sticky footer": How to create a sticky footer that plays well with Bootstrap 3
If you don't want to change the current css you have to make your text responsive to fix this problem.
set the font size and instead of px use vm, vw, vh or vmin These suffixes make your text responseive.
try this, may be this will help you
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.content-container {
height: 100%;
width: 100%;
display: table;
}
.table-responsive {
border: 1px solid #ddd;
display: -moz-stack;
margin-bottom: 15px;
overflow-y: hidden;
width: 100%;
}
</style>
</head>
<body>
<div class="content-container">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Bookings</h3></div>
<div class="bookings_list">
<div class="row">
<div class="col-xs-12">
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Customer</th>
<th>Provider</th>
<th>Agent</th>
<th>Service</th>
<th>Status</th>
<th>Status</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="clickable" action="push" href="/bookings/UY6001">
<td>123</td>
<td>John Smith</td>
<td>ACME Corp</td>
<td>Mike</td>
<td>123456</td>
<td>Active</td>
<td>Active</td>
<td>Active</td>
</tr>
<tr class="clickable" action="push" href="/bookings/UY6000">
<td>123</td>
<td>John Smith</td>
<td>ACME Corp</td>
<td>Mike</td>
<td>123456</td>
<td>Active</td>
<td>Active</td>
<td>Active</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Set your container's width based on the viewport instead of a percentage value:
#media (max-width: 768px) {
.container {
width: 100vw;
}
}
Updated Fiddle
Since container is a pretty common class in bootstrap, you might consider adding a custom class to the specific element you want to add this style to.