I need some assistance here. We are using custom fonts (non-standard fonts) for our site and use the following font-face declaration (declared in our global css):
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'MyWebFont';
src: url('webfontbold.eot'); /* IE9 Compat Modes */
src: url('webfontbold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfontbold.woff') format('woff'), /* Modern Browsers */
url('webfontbold.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfontbold.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'MyWebFont';
src: url('webfontitalic.eot'); /* IE9 Compat Modes */
src: url('webfontitalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfontitalic.woff') format('woff'), /* Modern Browsers */
url('webfontitalic.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfontitalic.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: italic;
}
So, far it has performed above our expectations… except one issue with IE7.
For some reason IE7 downloads all EOT files (as declared/used in font-face declarations), even though the page currently loaded in the browser, only used one or two font variations.
Please advise, what are we missing/what needs to be changed to fix this issue?
You can use Conditional Comments for it via sniffing the browsers version.
HTML:
<html>
<head>
<title>Example</title>
<!--[if lte IE 8]> <link rel="stylesheet" href="font-face-lte8.css" type="text/css" media="" title="" charset="utf-8"> <![endif]-->
<!--[if gte IE 9]> <link rel="stylesheet" href="font-face-gte9.css" type="text/css" media="" title="" charset="utf-8"> <![endif]-->
<link rel="stylesheet" href="font-face-allothers.css" type="text/css" media="" title="" charset="utf-8">
</head>
</html>
CSS for font-face-lte8.css:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'MyWebFont';
src: url('webfontbold.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'MyWebFont';
src: url('webfontitalic.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
font-weight: normal;
font-style: italic;
}
CSS for font-face-gte9.css
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'MyWebFont';
src: url('webfontbold.eot'); /* IE9 Compat Modes */
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'MyWebFont';
src: url('webfontitalic.eot'); /* IE9 Compat Modes */
font-weight: normal;
font-style: italic;
}
CSS for font-face-allothers.css
#font-face {
font-family: 'MyWebFont';
src: url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'MyWebFont';
src: url('webfontbold.woff') format('woff'), /* Modern Browsers */
url('webfontbold.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfontbold.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'MyWebFont';
src: url('webfontitalic.woff') format('woff'), /* Modern Browsers */
url('webfontitalic.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfontitalic.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: italic;
}
This will solve the problem.For info: IE9 supports TTF and WOFF files, so IE9 may download these too, even if he didn't need them.
Related
The problem is: when changing width of a window in Chrome or Safari, my grid element would create 1 additional row to fit its children, and when the window is shrunk even further it won't create any more rows, it keeps just 2 rows and, instead, begins to resize itself (pic.3).
It's the first time I see this problem and, honestly, can't understand what I'm missing there.
I've tested the same HTML file in Firefox -- and it works how intended (pic.1). The grid works just fine, creating as many rows as it needs to fit all its children. I have replicated the same styles and structure in CodePen, and it works fine on CodePen page in Chrome (pic.2), but if I download my CodePen project and open it in Chrome or Safari like an HTML file -- it has the same problem (pic.3).
I'd appreciate any suggestion or a correction. Thanks for your time.
CodePen link: https://codepen.io/vkharlakov/pen/wvjEgWM
HTML
<html>
<body>
<main>
<section>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</section>
</main>
</body>
</html>
CSS
body {
display: flex;
flex-direction: column;
align-items: center;
background-color: plum;
}
main {
width: 100%;
max-width: 1920px;
display: flex;
flex-direction: column;
justify-content: center;
}
section {
width: 100%;
display: flex;
justify-content: center;
background-color: white;
}
ul {
width: 100%;
margin: 30px;
gap: 20px;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, 250px);
grid-auto-rows: 350px;
justify-content: space-evenly;
}
li {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
border: 3px solid steelblue;
padding: 10px;
}
If you found yourself searching the Internet with the same question, consider including this meta tag in your <head></head> section of your page:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
It fixed the issue for me. Hope it helps you too!
I was following Devslopes tutorial on making the navbar responsive and i reached a point where i got stuck. in his video, after writing the javascript code and mediaquery css his navbar is showing but mine is not and i did exactly the same.
tutorial video link
html code:
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul class="topnav" id="dropdownClick">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="topnav-right">Sign-Up</li>
<li class="topnav-right">Sign-In</li>
<li class="dropdownIcon">☰</li>
</ul>
</nav>
<script>
function dropdownMenu(){
var x = document.getElementById(dropdownClick);
if(x.className === "topnav"){
x.className += " responsive";
// change topnav to topnav.responsive
} else{
x.className = "topnav";
}
}
</script>
</body>
</html>
Css Code:
/* ***** defaults ******** */
nav,
header,
footer{
display: block;
}
body{
line-height: 1;
margin: 0;
padding: 0;
}
/* ****** Navbar ***********/
nav{
width: 100%;
margin: 0;
}
nav ul{
background-color: #eee;
overflow: hidden;
margin: 0;
padding: 0;
}
ul.topnav li{
list-style: none;
float: left;
}
ul.topnav li.topnav-right{
float: right;
}
ul.topnav li a{
display: block;
text-decoration: none;
min-height: 16px;
text-align: center;
padding: 14px;
text-transform: uppercase;
color: #666;
}
ul.topnav li a:hover{
background-color: #0088ff;
color: #fff;
}
ul.topnav li.dropdownIcon{
display: none;
}
/* ************ mobile ******************** */
#media screen and (max-width: 680px){
ul.topnav li:not(:nth-child(1)){
display: none;
}
ul.topnav li.dropdownIcon{
display: block;
float: right;
}
ul.topnav.responsive{
position: relative;
}
ul.topnav.responsive li{
display: inline;
float: none;
}
ul.topnav.responsive li a{
display: block;
text-align: left;
}
}
Thank you.
In var x = document.getElementById(dropdownClick); the element ID (dropdownClick) is a string and should be in quotes like var x = document.getElementById('dropdownClick');
This layout is breaking in Outlook only. I can't remember where I got the template from, so I can't give credit where it's due, but I believe it's one of Lee Munroe's templates. I can't figure out why it's breaking in Outlook 2013 and it's a simple one-column layout. I have a more complex one-column layout that I'm using with the same framework, and that one gives me no trouble at all. But when I tried to parse it down into a simpler layout, I cannot get it to play nicely with Outlook. Any ideas? Self-taught coder so I could be missing something simple. I know Outlook can't handle max-width, but this template was supposed to be Outlook ready.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>A Message from the CEO</title>
<style type="text/css">
img {
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%; }
.img-block {
display: block; }
body {
font-family: open sans, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.4;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; }
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%; }
table td {
font-family: open sans, sans-serif;
font-size: 14px;
vertical-align: top; }
body {
background-color: #F6F6F6;
Margin: 0;
padding: 0; }
.body {
background-color: #F6F6F6;
width: 100%; }
.container {
Margin: 0 auto !important;
max-width: 600px;
padding: 30px;
width: auto !important;
width: 600px; }
.content {
box-sizing: border-box;
display: block;
Margin: 0 auto;
max-width: 600px;
padding: 0px; }
.main {
background: #FFFFFF;
border-radius: 3px;
width: 100%; }
.wrapper {
box-sizing: border-box;
padding: 30px; }
.header {
background-color: #FFFFFF;
Margin-bottom: 0px;
Margin-top: 0px;
padding: 0px 0px 0px 0px;
width: 100%; }
.header > table {
min-width: 100%; }
h1,
h2,
h3,
h4 {
Margin: 0; }
h1 {
font-family: open sans, sans-serif;
font-size: 1.4em;
font-weight: 700;
color: #7D1745;
text-align: left;
line-height: 1.4;
Margin-bottom: 10px; }
h2 {
font-family: open sans, sans-serif;
font-size: 1.2em;
font-weight: 700;
color: #3C708F;
text-align: left;
line-height: 1.4;
Margin-bottom: 15px; }
h3 {
font-family: open sans, sans-serif;
font-size: 1.2em;
font-weight: 700;
color: #7D1745;
text-align: left;
line-height: 1.4;
Margin-bottom: 15px; }
h4 {
font-family: open sans, sans-serif;
font-size: 1em;
font-weight: 700;
color: #454646;
text-align: left;
line-height: 1.4;
Margin-bottom: 15px; }
ul,
ol {
font-family: open sans, sans-serif;
font-size: 1em;
font-weight: normal;
color: #454646;
Margin: 0;
Margin-bottom: 20px; }
p li,
ul li,
ol li {
list-style-position: outside;
Margin-left: 15px;
padding: 0;
text-indent: 0; }
ul,
ol {
Margin-left: 5px;
padding: 0;
text-indent: 0; }
a:link {
font-family: open sans, sans-serif;
color: #3C708F;
font-size: 1em;
font-weight: 700;
text-decoration: none; }
a:hover {
font-family: open sans, sans-serif;
color: #56A2CC;
font-size: 1em;
font-weight: 700;
text-decoration: none; }
a:active {
font-family: open sans, sans-serif;
color: #3C708F;
font-size: 1em;
font-weight: 700;
text-decoration: none; }
a:visited {
font-family: open sans, sans-serif;
color: #3C708F;
font-size: 1em;
font-weight: 700;
text-decoration: none; }
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0; }
#media only screen and (max-width: 600px) {
h1 {
font-size: 24px !important;
Margin-bottom: 10px !important; }
h2 {
font-size: 21px !important;
Margin-bottom: 10px !important; }
h3 {
font-size: 21px !important;
Margin-bottom: 10px !important; }
h4 {
font-size: 18px !important;
Margin-bottom: 10px !important; }
p,
ul,
ol,
td,
span,
a {
font-size: 16px !important; }
.wrapper {
padding: 10px !important; }
.content {
padding: 0 !important; }
.container {
padding: 0 !important;
width: 100% !important; }
.header {
Margin-bottom: 10px !important; }
.main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important; }
.img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important; } }
#media all {
.ExternalClass {
width: 100%; }
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%; }
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important; } }
</style>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body class="">
<table border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td class="container">
<div class="content">
<!-- START CENTERED WHITE CONTAINER -->
<span class="preheader">Read the latest update from Johnson Financial Group.</span>
<table class="main" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="https://app.subscribermail.com/images/pp/56502968/2018_Images/Jim_Popp_600px.jpg" title="A Message from the CEO" alt="Header Image" width="600" class="img-responsive" border="0"></td>
</tr>
<tr>
<td class="wrapper">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<h1>Headline</h1>
<p>Content here. Blah blah blah blah.</p>
<h2>Subheadline 1</h2>
<p>Content here. Blah blah blah blah.</p>
<h3>Subheadline 2</h3>
<p>Content here. Blah blah blah blah. <strong style="font-weight: 700;">Read More</strong></p>
<h4>Subheadline 3</h4>
<p>Content here. Blah blah blah blah.</p>
<p><img src="https://app.subscribermail.com/images/pp/56502968/2018_Images/Jim_Popp.png" title="Jim Popp, CEO Johnson Financial Group" alt="Jim Popp" width="100" class="img-responsive" border="0" /></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="wrapper">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<img src="https://app.subscribermail.com/images/pp/56502968/2018_Images/JFG-HRZ-Web-200px.png" title="Johnson Financial Group" alt="JFG Logo" width="200" class="img-responsive" border="0" /><br />
<div> </div>
<strong style="font-weight: 700;">BANKING</strong>
<strong style="font-weight: 700;">WEALTH</strong>
<strong style="font-weight: 700;">INSURANCE</strong><br />
<div> </div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
</tr>
</table>
</body>
</html>
Your problems extend far beyond Outlook 2013. These problems are occurring in Outlook 2007-2016, Windows 10 Mail and Android devices.
The problem resides within the <style> sheet. If you comment out your style sheet, everything works fine when tested in Litmus.
The <style> sets the desktop <table> width to width: 100%;. But you don't want your tables at 100%, you wanted them at 600px.
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
/*width: 100%; <-- don't use this */
width: 600px;
}
Go through your <style> sheet and change width:100%; values to width: 600px;. This includes #media all, but you can skip #media only screen and (max-width: 600px) since those table values should be 100% width.
You need to figure out a way to make the controlling table 100% width and center the container tables in the parent table.
Other Issues
Your preview text is not working in Android. It's showing up and I think you want to hide it.
Open Sans will never work in Outlook or Gmail, since neither works with web fonts. You can use it for Apple, IOS, Android, AOL and other clients. I strongly suggest you use a link to a style sheet like this:
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
Add that to your <head>.
Use this instead in your style sheet for Open Sans as recommended by Google Fonts:
font-family: 'Open Sans', Arial, sans-serif;
You should set a default fallback font, which is currently set to sans-serif to ensure the right font is used. I suggest adding one more web safe font as a fallback for consistency, because Outlook has a bad habit of reverting to Times New Roman and you don't want a serif typeface.
Good luck.
Edit: I edited this answer because I did not make it clear you could skip editing values for this media query: #media only screen and (max-width: 600px).
this is its code it is only occupying 1/3rd of the browser page when seen through android chrome browser,Xperia z1
please someone suggest some changes
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<style type="text/css" >
*{
margin:0;
}
html {
background: url('Startupal coming soon4.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media only screen and (max-width: 600px) {
img src="Startupal coming soon4.jpg" {width: 100%; height: 100%; margin: 0; padding; 0;}
}
}
</style>
</head>
<body>
</body>
</html>
this is the whole code,it works fine on pc but not on the cell phone
Use a javascript script tag or file and update the width and height of the html body element each time the page is resized.
I usually use window.innerWidth and innerHeight because it is cross compatible and seems reliable.
window.addEventListener("resize", onResize);
function onResize(){
document.body.width = window.innerWidth;
document.body.height = window.innerHeight;
}
I am new to responsive web design and I am not sure why the ordered list and list is not responsive like the rest of the page.
#container {
text-align: center;
}
ol {
text-decoration: none;
font-family: helvetica;
width: 100%;
text-align: center;
margin-left: 500px;
text-decoration: none;
}
li {
text-decoration: none;
font-family: helvetica;
letter-spacing: 3px;
line-height: 25px;
color: green;
width: 100%;
padding-bottom: 10px;
font-size: 10px;
text-align: left;
}
<div id="container">
<h2>Step 1: Choose Your Drink</h2>
<ol>
<li>Chai Latte</li>
<li>Americano</li>
<li>Pumpkin Spice Latte</li>
<li>Vanilla Bean Frappuccino</li>
</ol>
<h2>Step 2: Join Us! and receive daily drink recipes.</h2>
</div>
any suggestions?
Thanks!
The ol{margin-left: 500px} is the culprit.
Try the following changes
ol{
font-family: helvetica;
text-decoration: none;
}
li{
text-decoration: none;
font-family: helvetica;
letter-spacing: 3px;
line-height: 25px;
color: green;
padding-bottom: 10px;
font-size: 10px;
list-style-position: inside;
}
I don't think this was exactly what you were looking for, but it should get you closer