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.
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'm trying to make the center blue div expand until it touches an edge of a screen. I would like it to expand the font size of all subtexts and the size of the discord iframe embed so that it is relatively the same size on any device. I'm not sure if this is even possible without javascript.
you can see the site at https://duelcraft.games/
h1 {
text-align: center;
font-size: 64px;
}
p {
text-align: center;
}
h2 {
text-align: center;
}
iframe {
display: block;
border-style: none;
}
html {
height: 100%;
}
body {
font: normal 16px verdana, arial, sans-serif;
background-position: top;
height: 100%;
}
.test {
width: 500px;
border: 2px solid black;
padding: 50px;
margin: auto;
background-color: #9FE7FF;
}
.email-part {
font-weight: bold;
}
<!DOCTYPE html>
<!--(c) 2022 DuelCraft-->
<html>
<head>
<meta charset="utf-8">
<title>DuelCraft</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/x-icon" href="images/icon.png">
</head>
<body background='images/background.png'>
<div class="test">
<h1>DuelCraft</h1>
<p class="main">DuelCraft Minecraft Server</p>
<h2>How do I join?</h2>
<p>Connect to play.duelcraft.games</p>
<div align="center"><iframe src="https://discord.com/widget?id=995858337293926400&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe></div>
<div class="email-part">
<p>Email user#example.com for help!</p>
</div>
</div>
<p> ©2022 DuelCraft </p>
</body>
</html>
from your last comment,
I know the solution.
add this to your HTML <head> element.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
this makes the website responsive for mobile versions.
this code is automatically generated in most of the IDEs (like vscode)
but in your case, there isn't so just add it
also for not having the margin on top and bottom,
use margin: 0 to the <body> selector
adding a small space in every part (top, left, right) is by adding this code:
the trick there is box-sizing: border-box;
#media screen and (max-width: 600px) {
* {
box-sizing: border-box;
}
body {
padding: 1rem;
}
.test {
width: 100%;
}
}
in this photo I added a padding of 1rem (~16px),
if you want less padding, just change the value
I used a #media because we want that: the code we will use works only on mobile, so on the desktop will be centered, and on mobile there is padding.
for making the discord iframe responsive use width:100% so it will use the maximum space it can have from the parent div.
.test, iframe {
width: 100%;
}
I wrote a comma here to avoid repeating the code multiple times.
for making the <h1> responsive we will use the vw unit in CSS.
h1 {
font-size: 12vw;
}
vw is the width_screen/100
h1 {
text-align: center;
font-size: 64px;
}
p {
text-align: center;
}
h2 {
text-align: center;
}
iframe {
display: block;
border-style: none;
}
html {
height: 100%;
}
body {
font: normal 16px verdana, arial, sans-serif;
background-position: top;
height: 100%;
margin: 0;
}
.test {
width: 500px;
border: 2px solid black;
padding: 50px;
margin: auto;
background-color: #9FE7FF;
}
.email-part {
font-weight: bold;
}
#media screen and (max-width: 600px) {
* {
box-sizing: border-box;
}
body {
padding: 1rem;
}
.test,
iframe {
width: 100%;
}
h1 {
font-size: 12vw;
}
}
<!DOCTYPE html>
<!--(c) 2022 DuelCraft-->
<html>
<head>
<meta charset="utf-8">
<title>DuelCraft</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/x-icon" href="images/icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body background='images/background.png'>
<div class="test">
<h1>DuelCraft</h1>
<p class="main">DuelCraft Minecraft Server</p>
<h2>How do I join?</h2>
<p>Connect to play.duelcraft.games</p>
<div align="center"><iframe src="https://discord.com/widget?id=995858337293926400&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe></div>
<div class="email-part">
<p>Email support#duelcraft.games for help!</p>
</div>
</div>
<p> ©2022 DuelCraft </p>
</body>
</html>
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
i'm a first time poster, long time enthusiast.
So i'm working on my personal website, and i haven't got that much experience in html/css, but i've come across a strange mismatch between firefox and chrome. And i was wondering if the wise people of the internet could direct me to where my (probably obvious) error is.
The problem im experiencing is that firefox will cut of the last 2 letters of my image. Ive colored the different parts so its more visible. I'll also post my code for those who want to see that. If you guys could point me towards a solution i would be very much obliged.
Firefox:
http://i.imgur.com/aFbYWS7.png
Chrome:
http://i.imgur.com/xumAiwk.png
/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:#ffffff; font-size: 13px; color: #666666; font-family: Arial, helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}
a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;}
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
img { display: block; margin-bottom: 10px;}
aside { font-style: italic; font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* Structure */
#wrapper {
width: 96%;
max-width: 920px;
margin: auto;
padding: 2%;
}
/* Banner */
#banner {
float: left;
margin-bottom: 15px;
width: 100%;
background-color:red;
}
#banner img {
max-width: 450px;
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
background-color:blue;
}
#occp {
float: left;
margin-bottom: 15px;
width: 100%;
background-color:green;
}
#occp img {
max-width: 800px;
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
background-color:yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> Demo | Responsive Web</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<link href="test.css" type="text/css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type='text/javascript' src='scripts/respond.min.js'></script>
</head>
<body>
<div id="wrapper">
<header>
<div id="banner">
<img src="https://dl.dropboxusercontent.com/u/15472320/logo.svg" alt="Banner" />
</div>
<div id="occp">
<img src="https://dl.dropboxusercontent.com/u/15472320/occp.svg" alt="Electrical Engineering Student" />
</div>
</header>
</div>
</body>
</html>
Given the JS fiddle SVG file in the comments section I was able to set the width to 100% and get the graphic to be the same size in chrome and firefox, I have not tested opera, IE, Edge, or safari.
<svg
...
width="100%"
...>
</svg>
JS Fiddle Fork of just the SVG
http://jsfiddle.net/7nn94k13/1/
Code Snippet with the SVG placed inside the original code
/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:#ffffff; font-size: 13px; color: #666666; font-family: Arial, helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}
a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;}
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
img { display: block; margin-bottom: 10px;}
aside { font-style: italic; font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* Structure */
#wrapper {
width: 96%;
max-width: 920px;
margin: auto;
padding: 2%;
}
/* Banner */
#banner {
float: left;
margin-bottom: 15px;
width: 100%;
background-color:red;
}
#banner img {
max-width: 450px;
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
background-color:blue;
}
#occp {
float: left;
margin-bottom: 15px;
width: 100%;
background-color:green;
}
#occp img {
max-width: 800px;
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
background-color:yellow;
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> Demo | Responsive Web</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<link href="test.css" type="text/css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type='text/javascript' src='scripts/respond.min.js'></script>
</head>
<body>
<div id="wrapper">
<header>
<div id="banner">
<img src="https://dl.dropboxusercontent.com/u/15472320/logo.svg" alt="Banner" />
</div>
<div id="occp">
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100%"
height="22.796349"
id="svg3086"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="New document 6">
<defs
id="defs3088" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="222.35964"
inkscape:cy="-265.74468"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="463"
inkscape:window-height="423"
inkscape:window-x="100"
inkscape:window-y="100"
inkscape:window-maximized="0" />
<metadata
id="metadata3091">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-152.64036,-243.82116)">
<text
xml:space="preserve"
style="font-size:31.58077812px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:110.00000238%;letter-spacing:-4.82484102px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Franklin Gothic Book;-inkscape-font-specification:Franklin Gothic Book"
x="150.44296"
y="261.72156"
id="text4820-4"
sodipodi:linespacing="110%"><tspan
sodipodi:role="line"
id="tspan4822-0"
x="150.44296"
y="261.72156"
style="font-size:26.31731796px;letter-spacing:-0.87724388px">Electrical Engineering Student</tspan></text>
</g>
</svg>
</div>
</header>
</div>
</body>
</html>
I've made several changes to the HTML/CSS with no luck, as the commenter said it's most likely something to do with how FF handles SVG's.
If the viewport and viewBox do not have the same width to height ratio, the preserveAspectRatio attribute directs the browser how to display the image.
Here's two great resources to refer to on this topic.
http://jonibologna.com/svg-viewbox-and-viewport/
http://codepen.io/jonitrythall/blog/preserveaspectratio-in-svg
Alternatively, use a png or jpg, as these files aren't likely to have this problem.
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;} }