Struggling to finalize the design of this website
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.
Despite trying various solutions from stackoverflow and other online forums, no progress has been made.
Sharing the css code and the header section of the html in hopes of finding a resolution.
@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 issue has been resolved. Thank you! Here is the updated snippet with the working font-face solution.