After few days of struggling coding a responsive Email and trying to find answers all over the web, my Media Queries are not used by mobile devices, I compared it to ready-made responsive template, tested, tested and tested again with different configurations... But still it's not working here is my header :
<!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">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
table[class=w600], td[class=w600] {width: 600px!important;}
body,table,td,p,a,li,blockquote{-webkit-text-size-adjust:none !important;}
#media only screen and (max-width: 599px), only screen and (max-device-width: 599px) {
table[class=w600], td[class=w600] {width: 480px!important;}
}
#media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
table[class=w600], td[class=w600] {width: 320px!important;}
p[class=for-pro], a[class=view-in] {font-size: 10px!important;}
p[class=bottom] {font-size: 12px!important;}
p[class=frank] {font-size: 16px!important;}
}
</style>
</head>
Am I missing something? What's the 'magic' stuff I need to write to make it works, because it's actually a very simple newsletter and as you can see, with only few css rules to follow.
Thank you.
Couple of things: 1. What browser/client are you testing in? IOS will respond responsively; however, Android's native app does not (Android 4.4).
2. Do not use h1, h2, . . . p tags. They respond differently depending on the email client. Apply all styles to the containing <td>.
Here is my default head that I start most single column emails with. It takes care of a lot of hacks you might encounter with yahoo, ios, and outlook.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>One Column Mobile Friendly Template</title>
<style>
/*------------------------------------*\
EMAIL CLIENT SPECIFIC STYLES
\*------------------------------------*/
.ReadMsgBody, .ExternalClass { width:100%; } /* Force Hotmail/Outlook.com to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height:100%; } /* Force Hotmail/Outlook.com to display normal line spacing */
body, table, td, p, a, li, blockquote { -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; } /* Prevent WebKit and Windows mobile from changing default text sizes */
table, td { mso-table-lspace:0pt; mso-table-rspace:0pt; } /* Removes spacing between tables in Outlook 2007 and up */
img { -ms-interpolation-mode:bicubic; } /* Allows smoother rendering of resized images in Internet Explorer */
.footer a { color:/*#ffffff*/; text-decoration:none; } /* Add this class to the system footer to change the unsubscribe link ---does not work for Gmail--- */
.iOSfix a { color:/*#ffffff*/; text-decoration:none; } /* Override the default blue link style that iOS puts on address and phone numbers */
.iOSfixaside a { color:/*#000000*/; text-decoration:none; } /* Alternate Style - Override the default blue link style that iOS puts on address and phone numbers */
.em-dragdrop-dummy { display:none!important; }
/*------------------------------------*\
RESET STYLES
\*------------------------------------*/
body { min-width:100% !important; }
html { width:100%; }
img { border:0; height:auto; line-height:100%; outline:none; text-decoration:none; }
table { border-collapse:collapse !important; }
body, .emWrapperTable, .emWrapperCell { height:100% !important; margin:0; padding:0; }
.mobileHeaderWidth .em-dockitem-empty, .mobileFooterWidth .em-dockitem-empty, .emWrapperTable, .emWrapperCell { width:100% !important; }
div { padding:0px !important; }
h1, h2, h3, h4, h5, h6 { display:block; margin:0px; }
/*------------------------------------*\
MOBILE STYLES
\*------------------------------------*/
#media only screen and (max-device-width: 720px) {
td[class="mobileHeaderCell"],
td[class="mobileColumnCell"],
td[class="mobileFooterCell"] { display:block !important; }
table[class="mobileHeaderWidth"],
table[class="mobileColumnWidth"],
table[class="mobileFooterWidth"],
td[class="mobileHeaderCell"],
td[class="mobileColumnCell"],
td[class="mobileFooterCell"] {width:480px!important;}
/* general display styles */
td {box-sizing:border-box; }
span[class="mHide"] { display:none!important; }
span[class="mBreak"] { display:block!important; }
p[class="mCenter"] { text-align:center!important; margin:0px 1em!important; }
/* link styles */
/* image styles */
img[class="mFullImage"] { width:100%!important; height:auto!important; }
img[class="mImgCenter"] { margin:0px auto!important; }
}
#media only screen and (max-device-width: 479px) {
table[class="mobileHeaderWidth"],
table[class="mobileColumnWidth"],
table[class="mobileFooterWidth"],
td[class="mobileHeaderCell"],
td[class="mobileColumnCell"],
td[class="mobileFooterCell"] { width:320px!important; }
/* general display styles */
/* link styles */
/* image styles */
}
</style>
</head>
Not all mobile devices or mobile apps support responsive and media queries.
For example Android or Gmail app won't. There are some workaround. Especially to get it working on Android and to force it to render Desktop on Gmail. You can find the solution for Android here:
How to get a responsive HTML email to work on Android?
Keeping that in mind, about the media queries you can try and set them up this way:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<style type="text/css">
#media only screen and (max-width: 500px) {
*[class].classname{width:100% !important;}
*[class].classname{float:left !important;}
*[class].classname{display:block !important;}
}
</style>
</head>
Its fully explained here:
How to code a responsive HTML email table step by step – tutorial
Related
I m building a website on my laptop by watching an instructor's video.I have to set the same pixels with him, to follow the design they gave me. BUT the design he follows,and i have to do so, fits only when my browser's zoom is 90%. When i zoom in 100% the content overflows.The items are shown as they should when my zoom is 90%. In other words the design i have to follow does not work on 100%, which is the default on my browser by the way.Any other website that i m just looking on internet works on 100% perfcetly.
i have set :
*
body margin 0
all sections background sizes cover or 100%
if i have to specify more details, please it would be helpful to let me know
Thank u in advance.
body{
margin: 0;
font-family: "SourceSansPro", serif;
}
#media (min-width: 1280px) {
.container {
width: 1360px;
}
header {
height: 745px;
padding-bottom: 90px;
}
<html>
<head>
<link href="app2.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<div class="container">
I noticed a closing brackets error here:
#media (min-width: 1280px) {
.container {
width: 1360px; /* Why you set 1360px when min-width is 1280px? */
} /* Need to close this */
}
To find out how to solve the problem, it would be advisable to publish the page's html and css. It would be the best if you also post a screenshot to make us understand better what happens.
I can't get my email template to show the mobile version on Gmail. I've tried different solutions from various posts on here and nothing is working. The email is responsive in Apple Mail and even Samsung Mail. I included the css below, any help would be greatly appreciated as I've been stuck on this issue for at least a year now it seems.
<style type="text/css">
#media only screen and (max-width: 600px) {
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body[yahoo] .all {
width: 355px !important;
}
body[yahoo] .no-mobile {
text-indent: -99999em !important;
display: none !important;
}
body[yahoo] .mobile-only {
text-indent: 0 !important;
display: block !important;
height: auto !important;
visibility: visible !important;
overflow: visible !important;
max-height: none !important;
}
}
The first thing I see is the [yahoo] hack. Attribute selectors are not supported in Gmail. And the [yahoo] hack in itself is no longer needed since march 2015.
The second thing to be aware of with Gmail, is that no all versions of Gmail support <style> and media queries. If you're testing on Gmail mobile webmail or on a Gmail app (iOS or Android) with a non Gmail account (an Outlook.com email address for example), you won't have support for media queries there. I wrote about this here: Trying to make sense of Gmail CSS support.
Here’s a full code example that works in Gmail desktop webmail and mobile apps (iOS or Android) with a Gmail account. Here’s a link to test previews on Email on Acid.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How do I get my responsive email to work in Gmail?</title>
<style>
#media only screen and (max-width: 600px) {
.all {
width: 355px !important;
}
.no-mobile {
text-indent: -99999em !important;
display: none !important;
}
.mobile-only {
text-indent: 0 !important;
display: block !important;
height: auto !important;
visibility: visible !important;
overflow: visible !important;
max-height: none !important;
}
}
</style>
</head>
<body>
<div class="all" style="background:green;">.all</div>
<div class="no-mobile" style="background:orange;">.no-mobile</div>
<div class="mobile-only" style="background:purple; display:none">.mobile-only</div>
</body>
</html>
When I set the font size to a specific pixel height, the computed font size is 1.333 times the size I've set in my CSS. However, if I set the font size as a percentage, the correct size is used. This happens in every browser that I've tried, including Firefox 3.6.28, Firefox 53.0.3 (both 32- and 64-bit), Internet Exploiter, Safari, Chrome and Opera.
Here is a whittled-down example of the problem:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>TocMenu Test</title>
<link href="/style/styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body
{ background:#000000 url('/graphics/l5-back-eso1213a-2K.jpg') repeat fixed;
color:#ffffe8;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:normal;
}
img
{ border:0;
margin:0;
padding:0;
}
#menuRoot *
{ min-width:0;/* peek-a-boo bug fix for IE7 */
position:relative;/* peek-a-boo bug fix for IE6 */
}
#menuRoot img
{ padding:3px;
}
.tocRoot
{ padding:0;
}
.tocLevel1
{ font-size:16.8pt; /* 120% */
font-weight:bold;
margin-top:9px;
}
.tocLevel2
{ font-size:15.4pt; /* 110% */
font-weight:bold;
margin-top:6px;
}
.tocMenuOpen
{ background:none;
color:#ffff66;
list-style:none;
}
.tocMenu1
{ padding-left:30px;
}
.tocLink, a.tocLink
{ color:#99ff99;
text-decoration:none;
}
.tocBtn, .tocBtnNot
{ display:inline-block;
text-align:left;
vertical-align:text-top;
width:14px;
}
</style>
</head>
<body>
<ul id="menuRoot" class="tocMenuOpen tocRoot">
<li>
<p class="glueDown">
<span class="tocBtn" id="menuHome_bn"><img src="/graphics/imgOpen.gif" alt="menu state indicator" /></span>
Home
</p>
<ul id="menuHome" class="tocMenuOpen tocMenu1">
<li>
<p class="glueDown">
<span class="tocBtnNot"> </span>
Today's News
</p>
</li>
</ul>
</li>
</ul>
</body></html>
If I change the tocLevel1 and tocLevel2 font-size values from their pixel heights to the percentage values shown ih the CSS comments, the page works correctly.
Why does every browser decide to use a font size one third larger than what is set in the CSS when the font-size value is set to a specific height?
You're mixing px (pixels) and pt (points) in your font sizes. 120% of 14px would be 16.8px, but you've specified the units as points, which are not the same thing, and are larger.
I'd suggest sticking to one unit to make it easier to adjust things relatively. (Or use an absolute measurement as your base size and use relative ones for everything else.)
At the end of my tether with this one.
My website: timjstevenson.com
Renders on everything except windows phone. No errors.
I am using the recommended head function
if (navigator.userAgent.match(/IEMobile\/10\.0/))
{
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(document.createTextNode("#-ms-viewport{width:auto!important}"));
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
And the recommended viewport metas
<meta name="viewport" content = "user-scalable=yes, maximum-scale=1, width=device-width /">
And the recommended CSS elements
#-webkit-viewport{width:device-width}
#-moz-viewport{width:device-width}
#-ms-viewport{width:device-width}
#-o-viewport{width:device-width}
#viewport{width:device-width}
but the site still renders at full size and doesn't handle the fixed / relative elements properly.
I have done a lot of research on this and read all the relevant blogs / forums.
The top of my CSS looks like this...
html
{-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-font-smoothing:antialiased;}
body
{max-width:768px; min-height:1028px;
margin-left:auto;
margin-right:auto;
background-color: #ffffff;}
#font-face {font-family: HelveticaNeue;
src:url(fonts/HelveticaNeueLTStd-Lt.otf);}
#font-face {font-family: FuturaStd;
src:url(fonts/FuturaStd-Book.otf);}
div, span
{font-family: HelveticaNeue, Arial, sans-serif;
font-size:120%;
font-weight:normal;
text-align:justify;
color:#202020;}
div.sitepage
{position:relative;
width:700px;
min-height:900px;
top:180px;
margin-left: auto;
margin-right: auto;
padding: 5px 10px 5px 10px;
z-index:1;}
And the top of the html looks like this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content = "width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="apple-touch-icon" href="images/tjs_logo.png"/>
And I have read these but no luck...
http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html
stackoverflow.com/questions/14654425
IMPORTANT EDIT: The issue appears to be with position:fixed DIVs. These DIV elements do not scale under windows phone IE.
SOLVED.
The problem is with Position Fixed DIVs with a specified width in pixels.
If the viewport is being controlled by media queries (specifically for WinPhone 7/8) then specifying a width greater then the screen width in a fixed div causes the problem.
Here is the start of my altered CSS - note the div.header and div.site entries. NO SPECIFIED WIDTH - just 100% inherited from body with a max-width thrown in.
body
{width:100%;
max-width:768px;
min-height:1028px;
margin-left:auto;
margin-right:auto;
background-color: #ffffff;}
#font-face {font-family: HelveticaNeue;
src:url(fonts/HelveticaNeueLTStd-Lt.otf);}
#font-face {font-family: FuturaStd;
src:url(fonts/FuturaStd-Book.otf);}
div, span
{font-family: HelveticaNeue, Arial, sans-serif;
font-size:120%;
font-weight:normal;
text-align:justify;
color:#202020;}
div.site
{max-width:768px;
min-height:1028px;
margin-left:auto;
margin-right:auto;}
div.header
{position:fixed;
z-index:5;}
And Here are the media and viewport elements I used.
#media screen and (max-device-width: 25em)
{body
{-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
-text-size-adjust: none;}}
#-webkit-viewport{width:device-width}
#-moz-viewport{width:device-width}
#-ms-viewport{width:device-width}
#-o-viewport{width:device-width}
#viewport{width:device-width}
And here is the head viewport meta tag in the html
<meta name="viewport" content = "width=device-width, maximum-scale=1.0"/>
Hope this helps.
T.
UPDATED:
I have found out this : margin: 0 auto; in the body {} block of the style sheet makes the header move. If I remove it, the banner header picture moves to the right. So that piece of line is the culprit. Does anybody know why?
As I have progressed (somewhat in the mystery) the question goes the other way.
I have this header file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<link rel="stylesheet" href= "<?php echo base_url() ?>css/main_style.css" />
<link rel="stylesheet" href= "<?php echo base_url() ?>css/webform.css" />
</head>
<div id="header" class = "header"><h1 class="header">Real Estate Worldwide</h1> </div>
<body>
Which connects to this View file (I am on MVC)
The code in the view has nothing to do with the issue, I asked so we'll skip it.
Then I have this Style sheet.
<style type = "text/css">
::selection{ background-color: #E13300; color: white; }
::-moz-selection {background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
body {
background:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
width:600px;
height:500px;
margin: 0 auto;
}
#header {
float:center;
background: url("../jq185/css/start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0;
font-family: 'trebuchet ms',geneva,arial,tahoma,sans-serif;
font-size: 10px;
margin: 0 auto;
margin-top: 2px;
padding: 0;
width: 1050px;
h2 {color:#ffffff;}
}
.header {
color:#ffffff;
}
ISSUE:
If I remove the 3 selection ::selection lines from the style sheet, the gradient effect, from the background body disappears.
If I leave it there, then the gradient effect works but then the #header jpg file that you see down the style sheet changes its position from the centered marging: 0 auto; to the right.
You have the full code there. I am puzzled as hell, because I cannot understand why something like ::selection would have a radical effect on the code snippet that refers to body {} where the call to the gradient picture is and also affects the font style within that body {}
II UPDATE
Here is the Controller
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Home_c extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->model('home_model');
}
public function index ()
{
$this->load->view('header');
$this->load->view('home');
}
public function load()
{ $this->load->view('header');
$data['paises'] = $this->home_model->devolverPaises();
$data['ofertas'] = $this->home_model->devolverOfertas();
I wouldn't be surprised if the strange effects you're seeing are tied to not having proper markup.
EDITED: As I made comments, I realized the may not have been clear enough for OP.
Your HTML structure needs to be valid, to start with:
<!DOCTYPE html >
<html>
<head>
<!-- title, meta, styles, etc go here -->
</head>
<body>
<!-- all your other content goes here -->
</body>
</html>
Make sure that when your page renders in the browser, when you look at View Source, you see those container elements in their proper places, nested as such. Better yet, run your page through a validation service. (http://validator.w3.org/ for example)
You have invalid CSS:
#header {
float:center; /* no such attribute... only left, right, none, or inherit */
h2 {color:#ffffff;} /* you can't nest tags inside other specs, except with the use of pre-processors like SASS or LESS */
}