I am developing an email newsletter that works on almost all clients - but for some reasons its not working on gmail. Basically, I want the font-size to be different across devices (bigger fonts on small devices).
However, Gmail seems to be completely ignoring the media query at all, and is rendering the desktop version. I tried different approaches - somebody said to create a new style to accomodate the media query, still didn't worked.
Below is the css code in the html. Can someone please help me?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>abc</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Lato');
/* CLIENT-SPECIFIC STYLES */
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* Prevent WebKit and Windows mobile changing default text sizes */
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* Remove spacing between tables in Outlook 2007 and up */
img {
-ms-interpolation-mode: bicubic;
}
/* Allow smoother rendering of resized image in Internet Explorer */
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] {
margin: 0 !important;
}
.rollover:hover>img,
* [summary=rollover]:hover>img {
max-height: 0px !important;
}
/* Hides visible image on rollover */
.rollover:hover>div img,
* [summary=rollover]:hover>div img {
max-height: none !important;
}
/* Makes hidden image appear in its place */
.font-mobile {
font-size: 16px;
}
h1 {
font-size: 30px;
font-family: 'Lato', sans-serif;
line-height: 1.5;
color: #004aa5;
font-weight: normal;
}
h1 span{
font-size: 20px;
}
p,
.p {
font-size: 14px;
font-family: 'Lato', sans-serif;
line-height: 1.6;
color: #000000;
}
.findout {
font-size: 18px;
}
.btn {
width: 242px;
}
.TC {
color: #4484df;
font-size: 12px;
}
.footer {
font-size: 12px !important;
color: #afafaf;
}
/* ... */
/*--- Preheader declaration in style block in addition to inline for Outlook */
.preheader {
display: none !important;
visibility: hidden;
opacity: 0;
color: transparent;
height: 0;
width: 0;
}
</style>
<style type="text/css">
#media screen and (max-width:600px) {
p {
font-size: 28px !important;
}
}
</style>
</head>
For newsletter you should use MJML Template it's compatible with all email client and its also provide responsive layout
Related
I am having a rough time with a strange problem related to background-color. Upon viewing the html file in a browser like chrome or firefox the background-color is not applying to the shop link(in the .header__shop selector). But when I inspect it and hover over the element, the background color suddenly appears in chrome and firefox.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.cdnfonts.com/css/helvetica-neue-9?styles=49034,49031,49033,49035,49032,49036,49038,49040,49042,49044,49037,49039,49041,49043,49045,49046"
rel="stylesheet"
crossorigin
/>
<link rel="stylesheet" href="style.css" />
<title>Assignment 4</title>
</head>
<body>
<header class="header">
<div class="header__top-ribbon">
<a href="#" class="header__logo margin-left-small margin-right-small"
><img src="./images/logo.png" alt="Motorolo logo"
/></a>
Explore
<a class="header__shop" href="#">Shop</a>
Customer Hub
</div>
</header>
</body>
</html>
CSS:
:root {
--header-active-background: #f2f2f2;
--header-link-color: #00000099;
--black: #000000;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
html {
font-size: 62.5%;
}
header a:link,
header a:visited {
display: block;
height: 100%;
display: flex;
align-items: center;
text-decoration: none;
color: var(--header-link-color);
font-size: 1.2rem;
padding: 0 1.2rem;
letter-spacing: 0.03125rem;
}
header a:link {
transition: all 0.5s;
}
header a:hover {
color: rgba(0, 0, 0, 0.95);
}
/* UTILS */
.margin-left-small {
margin-left: 2rem !important;
}
.margin-right-small {
margin-right: 2rem !important;
}
/* header */
.header__logo img {
height: 45%;
}
.header {
position: fixed;
top: 0;
}
.header__top-ribbon {
height: 6.4rem;
display: flex;
align-items: center;
gap: 1rem;
}
.header__shop {
background-color: var(--header-active-background);
font-weight: bold;
color: var(--black) !important;
}
.header__logo {
padding: 0 !important;
}
I have tried putting !important in
background-color: var(--header-active-background);
in the
.header__shop
selector and it didn't work. Tried taking screenshot and snipping tool but the taken screenshot shows up the background color even if it is not there as seen by eyes!
The background color showed up first time for me. Browsers cache pages and content (including CSS) and sometimes it helps to force refresh (Ctrl+Shift+R, or Ctrl+Click on refresh button) instead of normal refresh. Inspecting may have made the browser reload the files.
I have a website I am making for myself, and it works perfectly fine on everything except for Safari on my iPhone 11 Pro, which worked fine the first time I loaded the page but never afterward when I tried to refresh it. With the Chrome app, it even resizes correctly when I change some of the elements and refresh. I left out #media queries for now because I am trying to figure out this issue. Here is my CSS file:
#text, .desc {
font-family: calibri, times-new-roman;
font-size: 14px;
}
.topbar {
height:100%;
width:100%;
}
#headings {
font-family: arial, times-new-roman;
text-align: center;
font-family: candara;
}
table {
text-align: center;
font-family: arial;
border-collapse: collapse;
background-color: #c2c2c2;
}
#mypicture {
border-radius: 50%;
}
th {
text-align: center;
}
button {
height: 2%;
border: 2px solid black;
background-color: "#34c9eb";
cursor: pointer;
}
table {
border: 3px solid black;
padding: 1px;
}
th {
border: 3px solid black;
padding: 1px;
}
button {
width: 100px;
}
#media print {
#mypicture {
visibility: hidden;
}
}
I know it's really unorganized, that's just because I was trying to figure out the #meida query for it. Why doesn't my safari change when I adjust, let's say, the table border size? It changes just fine when I refresh on the chrome app or any other device (Chrome on Laptop, Safari on Dad's iPhone 6s, etc). Here is the head portion of my HTML file:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matthew Vandenberg</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
I am having trouble getting Google fonts to display in my email. It displays on locally through my browser but when I send tests to Gmail, MSO, etc., it is not working. I am able to get MSO fallback to be Arial, but I don't understand how I am not getting it to display even on Gmail.
Here is what I have in the </head> and immediately after the <body>:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta property="og:title" content="*|MC:SUBJECT|*">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet' type='text/css'>
<style type="text/css">
/* /\/\/\/\/\/\/\/\/ MAIL CLIENT & BROWSER-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
body,
table,
td,
p,
a,
li,
blockquote {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
/* /\/\/\/\/\/\/\/\/ MAIL CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
/* /\/\/\/\/\/\/\/\/ CLASSES /\/\/\/\/\/\/\/\/ */
body {
width: 100% !important;
}
body {
-webkit-text-size-adjust: none;
}
body {
margin: 0;
padding: 0;
}
img {
border: none;
font-size: 14px;
font-weight: bold;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
text-transform: capitalize;
}
#backgroundTable {
height: 100% !important;
margin: 0;
padding: 0;
width: 100% !important;
}
table {
border-collapse: collapse !important;
}
body,
.backgroundTable {
background-color: #ffffff;
}
#templateContainer {
border: 0px;
}
/* /\/\/\/\/\/\/\/\/ PREHEADER /\/\/\/\/\/\/\/\/ */
#templatePreheader {
background-color: #ffffff;
}
.preheaderContent div {
color: #bbbbbb;
font-family: Arial;
font-size: 10px;
line-height: 100%;
text-align: center;
}
.preheaderContent div a:link,
.preheaderContent div a:visited {
color: #8fa7d1;
font-weight: normal;
text-decoration: underline;
}
.preheaderContent div img {
height: auto;
max-width: 800px;
}
/* /\/\/\/\/\/\/\/\/ PREHEADER /\/\/\/\/\/\/\/\/ */
</style>
</head>
<body>
<!--[if mso]>
<style type="text/css">body, table, td {font-family: Arial, Helvetica, sans-serif !important;}</style><![endif]-->
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
<!--[if gte mso 15]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
<!--[if (gte mso 9)|(IE)]><table width="800" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border: 0px; "><tr><td><![endif]-->
Gmail doesn't support #font-face(which is inside of a google-font link) yet.
Take a look at the support here at Campaign Monitor for web fonts
From litmus
Web Fonts in Gmail
Finally, despite have a wildly popular web fonts service, Gmail does
not support the use of the #font-face property. Designers that use web
fonts in emails should carefully consider their font-stack, as their
backup fonts will be rendered in Gmail.
NOTE: However, you can make gmail render webfonts if you use a service like campaign monitor, since they use some special feature to treat this.
Trying to complete this website
http://www.nsckolkata.com/
The font-face for the header in the menubar (at the top sof style.css) is not working.
The media queries (at the bottom of style.css) are not working.
Tried a lot of solutions from stackoverflow and other discussion forums with no results.
I am putting up the css and the header section of the html. Hope this will help.
#font-face {
font-family: 'OldEnglish';
src: url('../fonts/olde_english_regular/OldeEnglishRegular.eot');
src: url('../fonts/olde_english_regular/OldeEnglishRegular.eot?#iefix') format('embedded-opentype'),
url('../fonts/olde_english_regular/OldeEnglishRegular.woff2') format('woff2'),
url('../fonts/olde_english_regular/OldeEnglishRegular.woff') format('woff'),
url('../fonts/olde_english_regular/OldeEnglishRegular.ttf') format('truetype'),
url('../fonts/olde_english_regular/OldeEnglishRegular.svg#OldEnglish') format('svg');
font-weight: normal;
font-style: normal;
}
.navbar-brand{
font-family: "OldEnglish";
font-size: 30px;
}
.copyright{
position:fixed;
bottom: 10px;
right: 10px;
font-size: 12px;
background:rgba(255,255,255);
padding:3px 12px;
border-radius: 4px;
border: 1px solid #ccc;
opacity: 0.8;
transition: 0.5s;
}
.copyright:hover{
background-color: rgba(0,0,0,0.8);;
color: #fff;
opacity: 1;
}
.committeedrop{
padding: 7px 7px;
min-width: 332px;
}
.contactdrop{
padding: 7px 0px;
min-width: 800px;
background-color:#fff !important;
}
#custom-bootstrap-menu.navbar-default .navbar-brand {
color: rgba(255, 255, 255, 1);
}
.label-as-badge {
border-radius: 1em;
font-size: 12px;
line-height:12px;
}
.inlineblock{
display:inline-block;
}
.navbar-brand img{
height: 40px;
width: 40px;
display: inline-block;
vertical-align: top;
bottom: 10px;
position: relative;
border-radius: 6px;
}
.mb20{
margin-bottom:20px;
}
.m0{
margin:0px;
}
.ml3{
margin-left:3px;
}
.panel300{
max-height: 300px;
overflow: hidden;
overflow-y: auto;}
}
.panel600{
max-height: 600px;
overflow: hidden;
overflow-y: auto;}
}
#media all and (max-width:767px) {
body{background-color: gray;}
.contactdrop{ min-width:300px !important;}
.contactdrop iframe{display:none;}
.panel300,.panel600{min-width:initial;}
}
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="nsc">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content="Numismatic Society of Calcutta"/>
<meta name="author" content="Numismatic Society of Calcutta"/>
<link rel="icon" href="image/Favicon/favicon.ico"/>
<title>Numistmatic Society of Calcutta</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet"/>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
** Updated Snippet
*** Font face problem resolved. Thanks! Updated snippet. Check the font-face at top for the solution.
You have extra curly braces closed Two times before media css in .panel300 and .page1600 style definitions.
.panel300{
max-height: 300px;
overflow: hidden;
overflow-y: auto;}
}
.panel600{
max-height: 600px;
overflow: hidden;
overflow-y: auto;}
}
Remove the extra curly braces from above to look like below
.panel300{
max-height: 300px;
overflow: hidden;
overflow-y: auto;
}
.panel600{
max-height: 600px;
overflow: hidden;
overflow-y: auto;
}
also as I have checked the browser console your font path is wrong.
check the screenshot below
screenshot
also change your doctype to
<!DOCTYPE html>
In my case I just change the DOCTYPE tag into <!DOCTYPE html>.
You don't need to include every font extension. Just use .ttf or .otf.
Seems to be a wrong path because of the 404... try the absolute URL for the src property instead of the relativ just to be sure (or give us the absolute path to the font so we can check the access.)
Your font is not accessible, that is why its not working. Please have a look. Check it here : http://www.nsckolkata.com/font/olde_english_regular/OldeEnglishRegular.ttf
As you are on Wordpress, you might find this article useful:
https://jeffsebring.com/2012/how-to-use-web-fonts-with-wordpress/
Write your media queries like this :
#media (max-width: 768px) {
.body{background-color: gray;}
.contactdrop{ min-width:300px !important;}
.contactdrop iframe{display:none;}
.panel300,.panel600{min-width:initial;} }
I am trying to use CSS to align numbers in a table when brackets are used to show the number as a negative value. Like you would use decimal tabs in MS Word.
The CSS works in IE6 and up but my problem is for IE6 - IE9 within print preview or when the page is printed the right bracket padding becomes greater than the specified value. Its fine printing within Chrome and Firefox.
Can anyone point me in the right direction to fix this?
The code:
<html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.1/build/cssreset/cssreset-min.css" />
<style type="text/css">
/* Ignore stuff below */
html{
font-family: arial, tahoma, sans-serif;
font-size: 12px;
line-height: 1.25em;
color: #333;
-webkit-font-smoothing: antialiased;
text-align: center;
background: #eee;
}
.wrapper{
width: 780px;
margin: 10px auto;
padding: 10px;
background: #fff;
}
table{
width: 100%;
font-size: 24px;
line-height: 1.25em;
}
h1{
font-size: 18px;
line-height: 1.25em;
text-align: left;
background: #eee;
padding: 5px 10px;
}
/* Ignore stuff above */
.pR{
padding-right: 10px; /* Needs to match width of .bracket below */
}
.bracket{
width: 10px; /* Needs to match padding-right of .pR above */
text-align: center;
display: inline-block;
/* Fix for inline-block for IE 7 */
zoom: 1;
*display: inline;
}
.right{
text-align: right;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>With padding</h1>
<table>
<tr>
<td class="right pR">1</td>
</tr>
<tr>
<td class="right"><div class="bracket">(</div>1<div class="bracket">)</div></td>
</tr>
</table>
</div>
</body>
</html>
NO need to use div.
Use span element in place of div.
Div is block element that why creating issue.