I have used a pretty standard code to create a navigation bar on my website www.alexanderpopov.org. I am using a css, and it shows nicely on my work computer. The problem is that on many computers/browsers, the navigation bar disappears, and all you see is the different categories in a line, without space and without the black background. I have a very basic knowledge of html and the problem is totally mystifying to me. I paste the script below; very grateful for any advice! Alex
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alexander Popov — Home</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- Back to top button -->
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script>
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 200px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<!-- Main Container -->
<div class="container">
<!-- Header -->
<header class="header">
<div class="topnav" id="myTopnav"> Home Selected Publications Published Research Working Papers Personal Curriculum Vitae <i class="fa fa-bars"></i> </div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</header>
<!-- Hero Section -->
<section class="intro">
<div class="column"> <img src="images/profile.png" alt="" class="profile"> </div>
<div class="column">
<h3>Alexander A. Popov</h3>
<p>PhD, <em>University of Chicago</em> <br>
Research Adviser, <em>European Central Bank</em><br>
Research Fellow, <em>CEPR Financial Economics & CEPR Monetary Economics</em></p>
</div>
</section>
<!-- Starts Content Section -->
<div class="content">
<h3>Intro</h3>
<p>I am a research economist, at the <em>European Central Bank</em> since 2007. </p>
<p>I am also a <em>CEPR Research Fellow</em>, both in the <em style="">Financial Economics Programme</em> and in the <em>Monetary Economics and Fluctuations Programme</em>.</p>
<p>My areas of interest are:
<ul>
<li>finance, growth, and risk;</li>
<li>banks and the real economy;</li>
<li>finance and politics;</li>
<li>finance and labor.</li>
</ul>
</p>
<p>My work has been published in top journals in both economics and finance, such as <em>American Economic Journal: Macroeconomics, Journal of International Economics</em> (2x), <em>Journal of Development Economics, Journal of Financial Economics, Review of Financial Studies</em> (2x), <em>American Economic Review Papers & Proceedings</em>, and <em>European Economic Review</em>.</p>
<p>My research papers have been presented in top academic conferences in economics, such as <em>AEA</em> (3x), <em>AFA</em> (2x), <em>Darden International Finance</em> (2x), <em>ECB/CEPR Labor Market Workshop</em> (2x), <em>Econometric Society World Congress, EEA</em> (3x), <em style="">EFA</em> (7x), <em>FIRS</em> (2x), <em>Lenzerheide</em>, <em>RES</em> (3x), <em>SED</em>, <em style="">Utah Finance</em>, and <em>WFA</em> (2x).</p>
<p>My research has been cited by the <em>Economist, Bloomberg, Financial Times</em>, and <em>Frankfurter Allgemeine Zeitung</em>, as well as received <em>Best Paper Awards</em> from the <em>Review of Finance</em>, the <em>Australasian Conference on Banking and Finance</em>, and the <em>Cass Business School Emerging Markets Finance Conference</em>.</p>
<p>I have taught an undergraduate course in <em>econometrics</em> at the <em>University of Chicago</em> and a graduate course in <em>corporate finance theory</em> at <em>Tilburg University</em>.</p>
<p>In the <em>RePEc</em> ranking, I am ranked in the <strong>top 1% in the world in the past 10 years</strong>, and in the top 100 in Europe.</p>
<p>Disclaimer: This is my personal website. The opinions expressed here do not represent the views of the <em>ECB</em> or the <em>Eurosystem</em>.</p>
<h3>Recent</h3>
<p><strong>December 2021:</strong> <em>The Economist</em> featured my recent paper Carbon Taxes and the Geography of Fossil Lending with Luc Laeven to make the case for a global - as opposed to a piecemeal - carbon tax.</p>
<p><strong>October 2021:</strong> I joined the <em>Monetary Economics and Fluctuations Program</em> and the <em>Financial Economics Program</em> of the <em>CEPR</em> as a Research Fellow.</p>
<p><strong>May 2021:</strong> <em>Political Cycles in Bank Lending to the Government</em> (with Michael Koetter) was published in the <em>Review of Financial Studies</em>.</p>
<p><strong>November 2020:</strong> My discussion of Orkun Saka's <em>Domestic Banks As Lightning Rods? Home Bias and Information during the Eurozone Crisis</em> was published in the <em>Journal of Money, Credit, and Banking</em>.</p>
<p><strong>October 2020:</strong> <em>Debt Overhang, Global Growth Opportunities, and Investment</em> (with Francesca Barbiero and Marcin Wolski) was published in the <em>Journal of Banking & Finance</em>.</p>
<p><strong>December 2019:</strong> <em>On the Link Between the Volatility and Skewness of Growth</em> (with Geert Bekaert) was published in the <em>IMF Economic Review</em>.</p>
<p><strong>October 2019:</strong> <em>The Invisible Hand of the Government: Moral Suasion During the Sovereign Debt Crisis</em> (with Steven Ongena and Neeltje Van Horen) was published in the <em>American Economic Journal: Macroeconomics</em>.</p>
<p><strong>June 2019:</strong> <em>Credit Market Competition and the Gender Gap in Labor Force Participation: Evidence from Local Labor Markets</em> (with Sonia Zaharia) was published in the <em>European Economic Review</em>.</p>
<p><strong>June 2019:</strong> <em>Do SMEs Benefit from Unconventional Monetary Policy and How? Micro-Evidence from the Eurozone</em> (with Annalisa Ferrando and Gregory F. Udell) was published in the <em>Journal of Money, Credit and Banking</em>.</p>
<p><strong> April 2019:</strong> I joined the <em>Economic Policy Panel</em> for the period 2019-2020.</p>
<p><strong>February 2019:</strong> I joined the <em>Journal of Banking & Finance</em> as an associate editor.</p>
<h3>Coming Up</h3>
<p>I will discuss "Climate Risk and FDI" by Grace Gu and Galina Hale at the <em>NBER’s</em> 45th annual meeting of the <em>International Seminar on Economics</em>, hosted by the <em>Bank of Greece</em> on June 20-21.</p>
<p>I am co-organizing, with Ralph De Haas, the <em>CEPR/EBRD/ECB Symposium</em> on “Climate change, finance and green growth”. The inaugural event took place virtually on 14-15 June 2021 in Frankfurt, and we had a very strong program. Stay tuned for the next installment!</p>
</div>
<!-- Footer Section -->
<footer>
<div class="button">EMAIL ME</div>
<p align="center"><strong>Tel.: +49(0)6913448428</strong></p>
<div class="footernav"> My RePEc page My Google scholar page My Vox page </div>
<p align="center"><small>©2022 Alexander Popov. Designed by Alphadesigner.</small></p>
</footer>
</div>
<!-- Main Container Ends -->
</body>
</html>
And here is the css:
#charset "UTF-8";
/* Google Fonts Import */
#import url('https://fonts.googleapis.com/css2 family=Open+Sans:ital,wght#0,300;0,400;0,600;1,300;1,400;1,600&display=swap');
/* Body */
body {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
margin: 0;
}
/* Links */
a {
color: #1D7E96;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
/* Container */
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #F7F3E9;
}
/* Header */
header {
width: 100%;
height: auto;
text-align: center;
}
/* Content */
.intro {
padding-top: 50px;
padding-left: 35px;
padding-right: 35px;
padding-bottom: 15px;
display: inline-block;
background-image: url(../images/bg.jpg);
background-repeat: repeat-x;
background-size: 1200px 400px;
background-position: center bottom;
}
#media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
.intro {
background-image: url(../images/bg#3x.jpg);
}
.column {
width: 50%;
text-align: center;
padding-top: 30px;
float: left;
}
.intro .column h3 {
padding-left: 30px;
padding-right: 30px;
text-align: left;
line-height: 25px;
font-weight: 600;
margin-left: 20px;
margin-right: 20px;
width: 80%;
font-size: 24px;
}
.intro .column p {
padding-left: 30px;
padding-right: 30px;
text-align: left;
line-height: 25px;
font-weight: 400;
margin-left: 20px;
margin-right: 20px;
width: 80%;
font-size: 16px;
}
.intro .column em {
font-weight: 300;
}
.content {
width: 60%;
align: center;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
padding-bottom: 50px;
}
.content h3 {
text-transform: uppercase;
font-weight: 300;
font-size: 20px;
letter-spacing: 4px;
color: #D45D35;
top: auto;
padding-top: 20px;
text-align: center;
margin-bottom: 30px;
margin-top: 60px;
padding-bottom: 20px;
border-bottom: thin dotted #D45D35;
}
.content h4 {
font-weight: 400;
font-size: 18px;
margin-bottom: 0px;
}
.content p {
margin-top: 0px;
}
.content em {
font-weight: 400;
}
.content li {
list-style-type: square;
list-style-position: inside;
}
footer {
background-color: #E4D9C9;
padding-top: 30px;
padding-bottom: 30px;
}
footer p {
margin: 0px;
padding: 0px;
}
.profile {
width: 50%;
}
/* Mobile */
#media (max-width: 320px) {
.intro {
background-position: center top;
}
.content {
width: 80%;
}
.intro .column h3 {
width: 90%;
text-align: center;
padding-left: 0px;
}
.intro .column p {
width: 80%;
text-align: center;
margin-left: 0px;
}
.column {
width: 100%;
margin-top: 0px;
}
.profile {
width: 100%;
}
}
/* Small Tablets */
#media (min-width: 321px)and (max-width: 767px) {
.intro {
background-position: center top;
}
.content {
width: 80%;
}
.column {
width: 100%;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.profile {
width: 80%;
}
.intro .column h3 {
width: 90%;
text-align: center;
padding-left: 0px;
}
.intro .column p {
width: 90%;
text-align: center;
padding-left: 0px;
}
}
/* Small Desktops */
#media (min-width: 768px) and (max-width: 1096px) {
.intro .column p {
width: 80%;
}
.profile {
width: 80%;
}
}
/*MENUS */
.footernav {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.footernav a {
display: inline-block;
color: #1D7E96;
text-align: center;
padding: 12px 12px;
margin-left: auto;
margin-right: auto;
}
.topnav {
position: fixed;
width: 100%;
height: 40px;
top: 0;
left: 0;
-webkit-box-shadow: 0px 1px 6px 0 #000000;
box-shadow: 0px 1px 6px 0 #000000;
background-color: #000000;
padding-bottom: 10px;
color: #F7F3E9;
overflow: hidden;
}
.topnav a {
display: inline-block;
color: #F7F3E9;
text-align: center;
padding: 14px 14px;
text-decoration: none;
font-size: 16px;
}
.topnav a:hover {
color: #83C3E1;
}
.topnav a.active {
color: #83C3E1;
}
.topnav .icon {
display: none;
}
/* When the screen is less than 900 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 900px) {
.topnav {
position: fixed;
height: auto;
padding-bottom: 0px;
}
.topnav a:not(:first-child) {
display: none;
}
.topnav a:first-child {
margin-left: 42px;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 900px) {
.topnav.responsive {
position: fixed;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: center;
margin: 0px;
}
}
/* Back to top button */
#myBtn {
display: none;
position: fixed;
bottom: 50px;
right: 40px;
z-index: 99;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
border: none;
outline: none;
background-color: #000000;
color: #FFFFFF;
cursor: pointer;
padding: 20px;
border-radius: 4px;
-webkit-box-shadow: 0px 1px 3px 0 #000000;
box-shadow: 0px 1px 4px 0 #000000;
}
#myBtn:hover {
background-color: #1D7E96;
}
/*Email Button */
.button {
width: 150px;
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
text-align: center;
vertical-align: middle;
border-radius: 0px;
text-transform: uppercase;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
color: #ffffff;
background-color: #000000;
border-radius: 4px;
}
.button a {
color: #F7F3E9;
text-decoration: none;
}
.button:hover {
background-color: #1D7E96;
color: #FFFFFF;
cursor: pointer;
}
You forgot to close your media-query, it is found at line 51 of your css file.
#media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
Therefor the styling of your navbar and all the other things inside the media-query will not display unless the screen matches the query.
I do not know what you want to create with the media-query therefor I cannot place it correctly. But when I commented the media-query out of your code your css displayed on your website.
#charset "UTF-8";
/* Google Fonts Import */
#import url('https://fonts.googleapis.com/css2 family=Open+Sans:ital,wght#0,300;0,400;0,600;1,300;1,400;1,600&display=swap');
/* Body */
body {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
margin: 0;
}
/* Links */
a {
color: #1D7E96;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
/* Container */
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #F7F3E9;
}
/* Header */
header {
width: 100%;
height: auto;
text-align: center;
}
/* Content */
.intro {
padding-top: 50px;
padding-left: 35px;
padding-right: 35px;
padding-bottom: 15px;
display: inline-block;
background-image: url(../images/bg.jpg);
background-repeat: repeat-x;
background-size: 1200px 400px;
background-position: center bottom;
}
#media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) { .intro {
background-image: url(../images/bg#3x.jpg); } .column {
width: 50%;
text-align: center;
padding-top: 30px;
float: left; } .intro .column h3 {
padding-left: 30px;
padding-right: 30px;
text-align: left;
line-height: 25px;
font-weight: 600;
margin-left: 20px;
margin-right: 20px;
width: 80%;
font-size: 24px; } .intro .column p {
padding-left: 30px;
padding-right: 30px;
text-align: left;
line-height: 25px;
font-weight: 400;
margin-left: 20px;
margin-right: 20px;
width: 80%;
font-size: 16px; } .intro .column em {
font-weight: 300; } }
.content {
width: 60%;
align: center;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
padding-bottom: 50px;
}
.content h3 {
text-transform: uppercase;
font-weight: 300;
font-size: 20px;
letter-spacing: 4px;
color: #D45D35;
top: auto;
padding-top: 20px;
text-align: center;
margin-bottom: 30px;
margin-top: 60px;
padding-bottom: 20px;
border-bottom: thin dotted #D45D35;
}
.content h4 {
font-weight: 400;
font-size: 18px;
margin-bottom: 0px;
}
.content p {
margin-top: 0px;
}
.content em {
font-weight: 400;
}
.content li {
list-style-type: square;
list-style-position: inside;
}
footer {
background-color: #E4D9C9;
padding-top: 30px;
padding-bottom: 30px;
}
footer p {
margin: 0px;
padding: 0px;
}
.profile {
width: 50%;
}
/* Mobile */
#media (max-width: 320px) {
.intro {
background-position: center top;
}
.content {
width: 80%;
}
.intro .column h3 {
width: 90%;
text-align: center;
padding-left: 0px;
}
.intro .column p {
width: 80%;
text-align: center;
margin-left: 0px;
}
.column {
width: 100%;
margin-top: 0px;
}
.profile {
width: 100%;
}
}
/* Small Tablets */
#media (min-width: 321px)and (max-width: 767px) {
.intro {
background-position: center top;
}
.content {
width: 80%;
}
.column {
width: 100%;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.profile {
width: 80%;
}
.intro .column h3 {
width: 90%;
text-align: center;
padding-left: 0px;
}
.intro .column p {
width: 90%;
text-align: center;
padding-left: 0px;
}
}
/* Small Desktops */
#media (min-width: 768px) and (max-width: 1096px) {
.intro .column p {
width: 80%;
}
.profile {
width: 80%;
}
}
/*MENUS */
.footernav {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.footernav a {
display: inline-block;
color: #1D7E96;
text-align: center;
padding: 12px 12px;
margin-left: auto;
margin-right: auto;
}
.topnav {
position: fixed;
width: 100%;
height: 40px;
top: 0;
left: 0;
-webkit-box-shadow: 0px 1px 6px 0 #000000;
box-shadow: 0px 1px 6px 0 #000000;
background-color: #000000;
padding-bottom: 10px;
color: #F7F3E9;
overflow: hidden;
}
.topnav a {
display: inline-block;
color: #F7F3E9;
text-align: center;
padding: 14px 14px;
text-decoration: none;
font-size: 16px;
}
.topnav a:hover {
color: #83C3E1;
}
.topnav a.active {
color: #83C3E1;
}
.topnav .icon {
display: none;
}
/* When the screen is less than 900 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 900px) {
.topnav {
position: fixed;
height: auto;
padding-bottom: 0px;
}
.topnav a:not(:first-child) {
display: none;
}
.topnav a:first-child {
margin-left: 42px;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 900px) {
.topnav.responsive {
position: fixed;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: center;
margin: 0px;
}
}
/* Back to top button */
#myBtn {
display: none;
position: fixed;
bottom: 50px;
right: 40px;
z-index: 99;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
border: none;
outline: none;
background-color: #000000;
color: #FFFFFF;
cursor: pointer;
padding: 20px;
border-radius: 4px;
-webkit-box-shadow: 0px 1px 3px 0 #000000;
box-shadow: 0px 1px 4px 0 #000000;
}
#myBtn:hover {
background-color: #1D7E96;
}
/*Email Button */
.button {
width: 150px;
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
text-align: center;
vertical-align: middle;
border-radius: 0px;
text-transform: uppercase;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
color: #ffffff;
background-color: #000000;
border-radius: 4px;
}
.button a {
color: #F7F3E9;
text-decoration: none;
}
.button:hover {
background-color: #1D7E96;
color: #FFFFFF;
cursor: pointer;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alexander Popov — Home</title>
<link href="index.css" rel="stylesheet" type="text/css">
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- Back to top button -->
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script>
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 200px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<!-- Main Container -->
<div class="container">
<!-- Header -->
<header class="header">
<div class="topnav" id="myTopnav"> Home Selected Publications Published Research Working Papers Personal Curriculum Vitae <i class="fa fa-bars"></i> </div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</header>
<!-- Hero Section -->
<section class="intro">
<div class="column"> <img src="images/profile.png" alt="" class="profile"> </div>
<div class="column">
<h3>Alexander A. Popov</h3>
<p>PhD, <em>University of Chicago</em> <br>
Research Adviser, <em>European Central Bank</em><br>
Research Fellow, <em>CEPR Financial Economics & CEPR Monetary Economics</em></p>
</div>
</section>
<!-- Starts Content Section -->
<div class="content">
<h3>Intro</h3>
<p>I am a research economist, at the <em>European Central Bank</em> since 2007. </p>
<p>I am also a <em>CEPR Research Fellow</em>, both in the <em style="">Financial Economics Programme</em> and in the <em>Monetary Economics and Fluctuations Programme</em>.</p>
<p>My areas of interest are:
<ul>
<li>finance, growth, and risk;</li>
<li>banks and the real economy;</li>
<li>finance and politics;</li>
<li>finance and labor.</li>
</ul>
</p>
<p>My work has been published in top journals in both economics and finance, such as <em>American Economic Journal: Macroeconomics, Journal of International Economics</em> (2x), <em>Journal of Development Economics, Journal of Financial Economics, Review of Financial Studies</em> (2x), <em>American Economic Review Papers & Proceedings</em>, and <em>European Economic Review</em>.</p>
<p>My research papers have been presented in top academic conferences in economics, such as <em>AEA</em> (3x), <em>AFA</em> (2x), <em>Darden International Finance</em> (2x), <em>ECB/CEPR Labor Market Workshop</em> (2x), <em>Econometric Society World Congress, EEA</em> (3x), <em style="">EFA</em> (7x), <em>FIRS</em> (2x), <em>Lenzerheide</em>, <em>RES</em> (3x), <em>SED</em>, <em style="">Utah Finance</em>, and <em>WFA</em> (2x).</p>
<p>My research has been cited by the <em>Economist, Bloomberg, Financial Times</em>, and <em>Frankfurter Allgemeine Zeitung</em>, as well as received <em>Best Paper Awards</em> from the <em>Review of Finance</em>, the <em>Australasian Conference on Banking and Finance</em>, and the <em>Cass Business School Emerging Markets Finance Conference</em>.</p>
<p>I have taught an undergraduate course in <em>econometrics</em> at the <em>University of Chicago</em> and a graduate course in <em>corporate finance theory</em> at <em>Tilburg University</em>.</p>
<p>In the <em>RePEc</em> ranking, I am ranked in the <strong>top 1% in the world in the past 10 years</strong>, and in the top 100 in Europe.</p>
<p>Disclaimer: This is my personal website. The opinions expressed here do not represent the views of the <em>ECB</em> or the <em>Eurosystem</em>.</p>
<h3>Recent</h3>
<p><strong>December 2021:</strong> <em>The Economist</em> featured my recent paper Carbon Taxes and the Geography of Fossil Lending with Luc Laeven to make the case for a global - as opposed to a piecemeal - carbon tax.</p>
<p><strong>October 2021:</strong> I joined the <em>Monetary Economics and Fluctuations Program</em> and the <em>Financial Economics Program</em> of the <em>CEPR</em> as a Research Fellow.</p>
<p><strong>May 2021:</strong> <em>Political Cycles in Bank Lending to the Government</em> (with Michael Koetter) was published in the <em>Review of Financial Studies</em>.</p>
<p><strong>November 2020:</strong> My discussion of Orkun Saka's <em>Domestic Banks As Lightning Rods? Home Bias and Information during the Eurozone Crisis</em> was published in the <em>Journal of Money, Credit, and Banking</em>.</p>
<p><strong>October 2020:</strong> <em>Debt Overhang, Global Growth Opportunities, and Investment</em> (with Francesca Barbiero and Marcin Wolski) was published in the <em>Journal of Banking & Finance</em>.</p>
<p><strong>December 2019:</strong> <em>On the Link Between the Volatility and Skewness of Growth</em> (with Geert Bekaert) was published in the <em>IMF Economic Review</em>.</p>
<p><strong>October 2019:</strong> <em>The Invisible Hand of the Government: Moral Suasion During the Sovereign Debt Crisis</em> (with Steven Ongena and Neeltje Van Horen) was published in the <em>American Economic Journal: Macroeconomics</em>.</p>
<p><strong>June 2019:</strong> <em>Credit Market Competition and the Gender Gap in Labor Force Participation: Evidence from Local Labor Markets</em> (with Sonia Zaharia) was published in the <em>European Economic Review</em>.</p>
<p><strong>June 2019:</strong> <em>Do SMEs Benefit from Unconventional Monetary Policy and How? Micro-Evidence from the Eurozone</em> (with Annalisa Ferrando and Gregory F. Udell) was published in the <em>Journal of Money, Credit and Banking</em>.</p>
<p><strong> April 2019:</strong> I joined the <em>Economic Policy Panel</em> for the period 2019-2020.</p>
<p><strong>February 2019:</strong> I joined the <em>Journal of Banking & Finance</em> as an associate editor.</p>
<h3>Coming Up</h3>
<p>I will discuss "Climate Risk and FDI" by Grace Gu and Galina Hale at the <em>NBER’s</em> 45th annual meeting of the <em>International Seminar on Economics</em>, hosted by the <em>Bank of Greece</em> on June 20-21.</p>
<p>I am co-organizing, with Ralph De Haas, the <em>CEPR/EBRD/ECB Symposium</em> on “Climate change, finance and green growth”. The inaugural event took place virtually on 14-15 June 2021 in Frankfurt, and we had a very strong program. Stay tuned for the next installment!</p>
</div>
<!-- Footer Section -->
<footer>
<div class="button">EMAIL ME</div>
<p align="center"><strong>Tel.: +49(0)6913448428</strong></p>
<div class="footernav"> My RePEc page My Google scholar page My Vox page </div>
<p align="center"><small>©2022 Alexander Popov. Designed by Alphadesigner.</small></p>
</footer>
</div>
<!-- Main Container Ends -->
</body>
</html>
More information about media queries
Related
https://jsfiddle.net/mp3ajvrL/
I'm trying to add a margin between the list element "contact us" and the h3 element with the text "Functional and Non-Functional Requirements". However, I am not able to do this. It looks like the h3 element covers the whole list somehow, so that the margin-top: 10px css will only add a margin above the list. Any tips?
body {
background-color: #333333;
margin: auto;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: white;
}
#navbar {
width: 100%;
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
}
.header {
font-size: 1em;
margin-bottom: 5%;
}
h2 {
font-size: 1em;
text-align: left;
padding-left: 2%;
margin-bottom: -1em;
}
h5 {
text-align: center;
}
h3 {
text-align: left;
padding-left: 2%;
font-size: 1.4em;
color: white;
margin-bottom: 0;
margin-top: 0;
}
p,
ul,
ol {
font-size: 1.2em;
line-height: 130%;
width: auto;
text-align: left;
padding-left: 2%;
}
p ol {
padding-left: 10%;
padding-bottom: 2%;
}
p ol li {
margin-bottom: 10px;
}
p {
float: left;
margin-bottom: 40px;
margin-top: 0.1em;
}
#cover {
width: 100%;
}
.intro .facts .bibliography {
min-width: 65ch;
max-width: 75ch;
}
#container {
position: relative;
text-align: center;
color: white;
}
#cover {
position: relative;
width: 100%;
}
#headingOnPicture {
position: relative;
}
#textOverImage {
position: absolute;
bottom: 0;
left: 2%;
}
#media only screen and (max-width: 1122px) {
#textOverImage {}
}
#media only screen and (max-width: 800px) {
#textOverImage {}
}
#navbar ul {
display: inline-block;
overflow: hidden;
list-style-type: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: inline-block;
list-style-type: none;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
padding: 15px;
margin: auto;
}
ol {
padding-left: 5%;
}
ol li {
margin: 0.5%;
}
#center {
margin: auto;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: white;
padding-left: 5%;
padding-right: 5%;
}
* {
box-sizing: border-box;
}
body {
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.four {
width: 60;
}
.four a {
width: 60px;
}
.container {
width: 20%;
margin: 0 auto;
}
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 25%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: #333;
font-size: 20px;
}
.one:hover~hr {
opacity: 1;
margin-left: 5%;
}
.two:hover~hr {
opacity: 1;
margin-left: 28%;
}
.three:hover~hr {
opacity: 1;
margin-left: 52%;
}
.four:hover~hr {
opacity: 1;
margin-left: 75%;
}
hr {
margin-left: 0%;
opacity: 0.1;
height: .25rem;
width: 25%;
margin: 0;
background: tomato;
border: none;
transition: .3s ease-in-out;
}
li b {
color: powderblue;
}
p {
float: left;
}
.mainPart {
width: 80%;
padding-left: 20%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="styling.css">
</head>
<body>
<div class="container">
<ul>
<li class="one">P1</li>
<!--
-->
<li class="two">P2</li>
<!--
-->
<li class="three">P3</li>
<!--
-->
<li class="four">P4</li>
<hr />
</ul>
</div>
<div id="container">
<header id="headingOnPicture">
<img id="cover" src="mountains.jpg" alt="Cover image" />
<h1 id="textOverImage">P1: Requirements</h1>
</header>
<div class="header">
<div>
<div> // 18. September 2019
</div>
</div>
</div>
<div class="mainPart">
<h3>
Administrative Details
</h3>
<p>
Antikvariatet is a cozy bar/pub/café/venue located at Bakklandet in Trondheim. It offers a great assortment of beers as well as outside serving. The inside of Antikvariatet consists of two separated areas. One offers a calm, laid-back atmosphere while
the other hosts various kinds of events. The events ranges from small concerts and standup comedy to cultural performances and social debates.
</p>
<h3>Purpose and goals</h3>
<p>
The main purpose of this website is to inform customers about events happening at Antikvariatet. The business goal is to increase the amount of visitors to the venue. This means that the "event" section of the website needs to stand out. In addition,
special offers also need to be clearly communicated. The website has to capture the cozy atmosphere Antikvariatet offers.
</p>
<br>
<div>
<h3>Audience</h3>
<p>
The intended user is in the age group 18 to 60. These customers tend to use the internet more for looking up information about the venue.
</p>
<br>
<br>
</div>
<div class="content">
<h3>
The content of the site and how it is organized
</h3>
<h2> The major sections of the website:</h2>
</div>
<br>
<ol>
<li><b>About us: </b> Consists of the general information about Antikvariatet. What the concept is and what they offer.</li>
<li><b>Menu: </b>Should provide the menu for the restaurant and the selection of beers in the bar.</li>
<li><b>Events: </b>Events consists of three subcategories the customer can choose between if desired. The subcategories are «Cultural events», «Sosial events» and «Concerts». The customer can also just scroll down and see the unfiltered list of events.
A «Search for event or concert» - should also appear with a search bar. Next to the event there should be a button to sign up for the event.</li>
<li><b>Picures: </b>This should consists of pictures showing the cozy atmosphere and the different things they offer. It could also have an Instagram part consisting of pictures taken by customers and tagged with «Antikvariatet».</li>
<li><b>Contact us: </b>Should contain the information about where they are located with a map, the opening hours, the mail to contact them and the telephone number.</li>
</ol>
<div>
<h3>
Functional and Non-Functional Requirements
</h3>
<h2>
Non-functional:
</h2>
<br>
<p>
Due to the large age difference of the clientele, the website should and be easy and intuitive also for users with low technology experience. The appearance of the website should reflect the warm and welcoming environment that Antikvariatet provide. The
webside should be effective, and all functionalities should react within a second.
</p>
<h2>
Functional:
</h2>
<br>
<p>
The customers should easily be provided a menu for the café. They should also able to make and send in orders for the different events. The website should provide a calendar for all the events. One should be able to click on a date and see happenings
on that day, and also all happenings over a longer periode. For better usability, the customer should be able to divide the different events in smaller groups; concerts, social events or cultural activities and be able to search for events.
The customer should also be able to press a button and get the website in English instead of Norwegian.
</p>
</div>
<h3>Final location:</h3>
<p>
We have not yet been in touch with Antikvariatet about making an actual website for them. Howerver, the website will be hosted at one of our folk.ntnu servers.
</p>
</div>
</div>
</body>
</html>
Get rid of the rule:
li {
float: left;
}
body {
background-color: #333333;
margin: auto;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: white;
}
#navbar {
width: 100%;
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
}
.header {
font-size: 1em;
margin-bottom: 5%;
}
h2 {
font-size: 1em;
text-align: left;
padding-left: 2%;
margin-bottom: -1em;
}
h5 {
text-align: center;
}
h3 {
text-align: left;
padding-left: 2%;
font-size: 1.4em;
color: white;
margin-bottom: 0;
margin-top: 0;
}
p,
ul,
ol {
font-size: 1.2em;
line-height: 130%;
width: auto;
text-align: left;
padding-left: 2%;
}
p ol {
padding-left: 10%;
padding-bottom: 2%;
}
p ol li {
margin-bottom: 10px;
}
p {
float: left;
margin-bottom: 40px;
margin-top: 0.1em;
}
#cover {
width: 100%;
}
.intro .facts .bibliography {
min-width: 65ch;
max-width: 75ch;
}
#container {
position: relative;
text-align: center;
color: white;
}
#cover {
position: relative;
width: 100%;
}
#headingOnPicture {
position: relative;
}
#textOverImage {
position: absolute;
bottom: 0;
left: 2%;
}
#media only screen and (max-width: 1122px) {
#textOverImage {}
}
#media only screen and (max-width: 800px) {
#textOverImage {}
}
#navbar ul {
display: inline-block;
overflow: hidden;
list-style-type: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: inline-block;
list-style-type: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
padding: 15px;
margin: auto;
}
ol {
padding-left: 5%;
}
ol li {
margin: 0.5%;
}
#center {
margin: auto;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: white;
padding-left: 5%;
padding-right: 5%;
}
* {
box-sizing: border-box;
}
body {
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.four {
width: 60;
}
.four a {
width: 60px;
}
.container {
width: 20%;
margin: 0 auto;
}
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 25%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: #333;
font-size: 20px;
}
.one:hover~hr {
opacity: 1;
margin-left: 5%;
}
.two:hover~hr {
opacity: 1;
margin-left: 28%;
}
.three:hover~hr {
opacity: 1;
margin-left: 52%;
}
.four:hover~hr {
opacity: 1;
margin-left: 75%;
}
hr {
margin-left: 0%;
opacity: 0.1;
height: .25rem;
width: 25%;
margin: 0;
background: tomato;
border: none;
transition: .3s ease-in-out;
}
li b {
color: powderblue;
}
p {
float: left;
}
.mainPart {
width: 80%;
padding-left: 20%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="styling.css">
</head>
<body>
<div class="container">
<ul>
<li class="one">P1</li>
<!--
-->
<li class="two">P2</li>
<!--
-->
<li class="three">P3</li>
<!--
-->
<li class="four">P4</li>
<hr />
</ul>
</div>
<div id="container">
<header id="headingOnPicture">
<img id="cover" src="mountains.jpg" alt="Cover image" />
<h1 id="textOverImage">P1: Requirements</h1>
</header>
<div class="header">
<div>
<div> // 18. September 2019
</div>
</div>
</div>
<div class="mainPart">
<h3>
Administrative Details
</h3>
<p>
Antikvariatet is a cozy bar/pub/café/venue located at Bakklandet in Trondheim. It offers a great assortment of beers as well as outside serving. The inside of Antikvariatet consists of two separated areas. One offers a calm, laid-back atmosphere while
the other hosts various kinds of events. The events ranges from small concerts and standup comedy to cultural performances and social debates.
</p>
<h3>Purpose and goals</h3>
<p>
The main purpose of this website is to inform customers about events happening at Antikvariatet. The business goal is to increase the amount of visitors to the venue. This means that the "event" section of the website needs to stand out. In addition,
special offers also need to be clearly communicated. The website has to capture the cozy atmosphere Antikvariatet offers.
</p>
<br>
<div>
<h3>Audience</h3>
<p>
The intended user is in the age group 18 to 60. These customers tend to use the internet more for looking up information about the venue.
</p>
<br>
<br>
</div>
<div class="content">
<h3>
The content of the site and how it is organized
</h3>
<h2> The major sections of the website:</h2>
</div>
<br>
<ol>
<li><b>About us: </b> Consists of the general information about Antikvariatet. What the concept is and what they offer.</li>
<li><b>Menu: </b>Should provide the menu for the restaurant and the selection of beers in the bar.</li>
<li><b>Events: </b>Events consists of three subcategories the customer can choose between if desired. The subcategories are «Cultural events», «Sosial events» and «Concerts». The customer can also just scroll down and see the unfiltered list of events.
A «Search for event or concert» - should also appear with a search bar. Next to the event there should be a button to sign up for the event.</li>
<li><b>Picures: </b>This should consists of pictures showing the cozy atmosphere and the different things they offer. It could also have an Instagram part consisting of pictures taken by customers and tagged with «Antikvariatet».</li>
<li><b>Contact us: </b>Should contain the information about where they are located with a map, the opening hours, the mail to contact them and the telephone number.</li>
</ol>
<div>
<h3>
Functional and Non-Functional Requirements
</h3>
<h2>
Non-functional:
</h2>
<br>
<p>
Due to the large age difference of the clientele, the website should and be easy and intuitive also for users with low technology experience. The appearance of the website should reflect the warm and welcoming environment that Antikvariatet provide. The
webside should be effective, and all functionalities should react within a second.
</p>
<h2>
Functional:
</h2>
<br>
<p>
The customers should easily be provided a menu for the café. They should also able to make and send in orders for the different events. The website should provide a calendar for all the events. One should be able to click on a date and see happenings
on that day, and also all happenings over a longer periode. For better usability, the customer should be able to divide the different events in smaller groups; concerts, social events or cultural activities and be able to search for events.
The customer should also be able to press a button and get the website in English instead of Norwegian.
</p>
</div>
<h3>Final location:</h3>
<p>
We have not yet been in touch with Antikvariatet about making an actual website for them. Howerver, the website will be hosted at one of our folk.ntnu servers.
</p>
</div>
</div>
</body>
</html>
If you need to float some other set of list items then change the selector to be more specific and target only those list items, not all of them.
I want my image to overlap two sections on tablet/desktop but not on mobile. Currently, it's doing so but it's causing the image to overlap the text in the first section.
I've tried adding "margin-top: -226px" to the image when the min-width is 768px (but again, it overlaps the text in the first/hero section).
<!-- #HERO -->
<div class="hero-bg center-text">
<div class="center-container">
<h2 class="join">
<span class="join-the">Join The</span>
<img class="shelf-squad-logo" src="https://shelfstuff.staging.thisismess.io/wp-content/plugins/readraterewards/static/img/logo-self-squad.svg">
</h2>
<h1 class="rate-read-rewards">
<img class="read-rate-rewards-logo" src="https://shelfstuff.staging.thisismess.io/wp-content/plugins/readraterewards/static/img/logo-read-rate-review.svg">
</h1>
<p class="enter-for-a-chance">Enter for a chance to win a Shelf Squad Summer Reading prize pack!</p>
<p class="read-or-listen-to-excerpt">
Read or listen to an excerpt of any book below and submit a review for a chance to win. Not able to read or listen? Visit the official rules here on how to send in a write-in entry.
</p>
</div>
</div>
<!-- #PRIZES -->
<div class="prize-bg center-text">
<div class="center-container">
<img class="prize-pack" src="https://storage.googleapis.com/shelfstuff-staging/uploads/2019/05/210d080f-thumbnail-1.jpg">
<p class="grand-prize">Grand Prize</p>
<h2 class="grand-prize-desc">One grand prize winner every two weeks will receive a Shelf Squad prize pack including:</h2>
<ul>
<li class="prize-bullet">A set of amazing FREE books</li>
<li class="prize-bullet">1 Shelf Stuff tote bag</li>
<li class="prize-bullet">1 $50 gift card</li>
<li class="prize-bullet">1 Shelf Stuff pin</li>
<li class="prize-bullet">1 Shelf Stuff activity book</li>
</ul>
</div>
</div>
/*------------------------------------*\
#UNIVERSAL
\*------------------------------------*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.center-container {
max-width: 1220px;
padding: 40px;
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
}
ul {
color: white;
margin-top: 24px;
font-weight: 700;
font-size: 18px;
line-height: 30px;
list-style: none;
text-align: left;
}
li {
padding-left: 18px;
}
/*------------------------------------*\
#HERO
\*------------------------------------*/
.hero-bg {
background: blue;
}
.join-the {
color: white;
text-transform: uppercase;
font-size: 21px;
font-weight: 900;
display: block;
}
.read-rate-rewards-logo {
margin: 45px auto 40px auto;
}
.enter-for-a-chance {
color: white;
font-size: 36px;
font-weight: 700;
line-height: 48px;
margin: 14px 0;
}
.read-or-listen-to-excerpt {
color: white;
font-weight: 700;
font-size: 20px;
line-height: 31px;
max-width: 632px;
margin: 1em auto;
}
/*------------------------------------*\
#PRIZES
\*------------------------------------*/
.prize-bg {
background: orange;
}
.grand-prize {
color: var(--purple-color);
text-transform: uppercase;
margin: 33px auto;
font-weight: 900;
font-size: 24px;
}
.grand-prize-desc {
color: white;
font-weight: 700;
font-size: 36px;
line-height: 55px;
}
/*------------------------------------*\
#UTILITY
\*------------------------------------*/
.center-text {
text-align: center;
}
/*------------------------------------*\
#RESPONSIVE
\*------------------------------------*/
#media only screen and (min-width: 768px) {
.container {
max-width: 1300px;
}
.prize-pack {
margin-top: -226px;
}
}
On tablet/desktop, I would like there to be enough room in the first section to fit half of the image. Half of the image should be in the hero and half should be in the prizes section.
this is what I want it to look like
Craig it's worth jumping into ... Bootstrap. Mobile first, 100% responsive framework. Master the grid!
Get Bootstrap
Maybe this code help you
you can add simple padding in the banner section because of the next section you talk the margin-top: -something then it's not expanding height(banner content). so you needed some padding in the banner bottom.
Here the simple code
/*------------------------------------*\
#UNIVERSAL
\*------------------------------------*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.center-container {
max-width: 1220px;
padding: 40px;
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
}
ul {
color: white;
margin-top: 24px;
font-weight: 700;
font-size: 18px;
line-height: 30px;
list-style: none;
text-align: left;
}
li {
padding-left: 18px;
}
/*------------------------------------*\
#HERO
\*------------------------------------*/
.hero-bg {
background: blue;
padding-bottom: 200px;
}
.join-the {
color: white;
text-transform: uppercase;
font-size: 21px;
font-weight: 900;
display: block;
}
.read-rate-rewards-logo {
margin: 45px auto 40px auto;
}
.enter-for-a-chance {
color: white;
font-size: 36px;
font-weight: 700;
line-height: 48px;
margin: 14px 0;
}
.read-or-listen-to-excerpt {
color: white;
font-weight: 700;
font-size: 20px;
line-height: 31px;
max-width: 632px;
margin: 1em auto;
}
/*------------------------------------*\
#PRIZES
\*------------------------------------*/
.prize-bg {
background: orange;
}
.grand-prize {
color: var(--purple-color);
text-transform: uppercase;
margin: 33px auto;
font-weight: 900;
font-size: 24px;
}
.grand-prize-desc {
color: white;
font-weight: 700;
font-size: 36px;
line-height: 55px;
}
/*------------------------------------*\
#UTILITY
\*------------------------------------*/
.center-text {
text-align: center;
}
/*------------------------------------*\
#RESPONSIVE
\*------------------------------------*/
#media only screen and (min-width: 768px) {
.container {
max-width: 1300px;
}
.prize-pack {
margin-top: -226px;
}
}
<!-- #HERO -->
<div class="hero-bg center-text">
<div class="center-container">
<h2 class="join">
<span class="join-the">Join The</span>
<img class="shelf-squad-logo" src="https://shelfstuff.staging.thisismess.io/wp-content/plugins/readraterewards/static/img/logo-self-squad.svg">
</h2>
<h1 class="rate-read-rewards">
<img class="read-rate-rewards-logo" src="https://shelfstuff.staging.thisismess.io/wp-content/plugins/readraterewards/static/img/logo-read-rate-review.svg">
</h1>
<p class="enter-for-a-chance">Enter for a chance to win a Shelf Squad Summer Reading prize pack!</p>
<p class="read-or-listen-to-excerpt">
Read or listen to an excerpt of any book below and submit a review for a chance to win. Not able to read or listen? Visit the official rules here on how to send in a write-in entry.
</p>
</div>
</div>
<!-- #PRIZES -->
<div class="prize-bg center-text">
<div class="center-container">
<img class="prize-pack" src="https://storage.googleapis.com/shelfstuff-staging/uploads/2019/05/210d080f-thumbnail-1.jpg">
<p class="grand-prize">Grand Prize</p>
<h2 class="grand-prize-desc">One grand prize winner every two weeks will receive a Shelf Squad prize pack including:</h2>
<ul>
<li class="prize-bullet">A set of amazing FREE books</li>
<li class="prize-bullet">1 Shelf Stuff tote bag</li>
<li class="prize-bullet">1 $50 gift card</li>
<li class="prize-bullet">1 Shelf Stuff pin</li>
<li class="prize-bullet">1 Shelf Stuff activity book</li>
</ul>
</div>
</div>
So I'm a total beginner (2 weeks learning) and I am creating my first website for a FreeCodeCamp project.
I'm trying to set my bullet points to be a certain distance to the right on my screen at all times.
I used margin-left: 300px; in my CSS chart but if I minimize my window or go on my phone it throws it all off alignment.
How would I go about making it stay in the same place no matter what size the screen is?
https://codepen.io/Carnoux/pen/PQEXoY
.ulStyleCenter {
display: block;
color: white;
margin-left: 300px;
margin-right: auto;
list-style-position: inside;
}
I added a wrapper on the body of your content and then replaced
margin-left: 300px;
with margin-left: 2vw;
vw is viewport width, so it proportional to the size of the screen. 2vw means that the margin-left will be 2% of the total viewport.
h1 {
color: blue;
font-family: "Allerta Stencil";
font-weight: bold;
}
h3 {
color: blue;
font-family: "Allerta Stencil";
}
h4 {
color: white;
font-family: "Allerta Stencil";
text-align: center;
font-size: 45px;
}
.bgColor {
background-color: black;
background-image: url("https://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg");
background-size: cover;
}
.rankScreen {
display: block;
margin-left: auto;
margin-right: auto;
border-style: ridge;
border-color: #000077;
border-width: 15px;
max-width: 100%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.pStyle {
color: white;
background-color: #000055;
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 8px;
}
.ulStyleCenter {
color: white;
margin-left: 2vw;
margin-right: auto;
}
.pStyle2 {
font-size: 30px;
color: white;
padding: 50px;
}
.credit {
display: block;
background-color: black;
color: white;
text-align: center;
font-size: 15px;
}
#media screen and (max-width: 480px) {
img {
width: 400px;
}
}
.wrapper{
width: 70%;
margin-left: auto;
margin-right: auto;
}
<link href='https://fonts.googleapis.com/css?family=Allerta Stencil' rel='stylesheet'>
<div class="bgColor">
<div class="wrapper">
<h1 class="text-center">-Counter-Strike Global Offensive-</h1>
<h3 class="text-center"><em>The game that redefined a genre</em></h3>
<img class="center" src="http://dorkshelf.com/wordpress/wp-content/uploads//2016/03/Counter-Strike-Global-Offensive-large.jpg" alt="CS:GO Banner">
<p class="pStyle text-center">CS:GO is a first-person shooter created by Valve that pits two teams of five players against eachother</p>
<br>
<ul class="ulStyleCenter">
<li>Released by Valve in 2012</li>
<li>First-Person Shooter</li>
<li>Team based 5v5</li>
<li>20+ maps</li>
<li>Counter-Terrorists vs. Terrorists</li>
<li>Round based matches. First team to 16 rounds wins</li>
<li>Round time limit of 2 minutes</li>
<li>Terrorists must plant a bomb before time ends or Counter-Terrorist team is eliminated</li>
<li>Counter-Terrorists must defend bomb from being planted, kill all Terrorists or defuse bomb after it is planted</li>
<li>Full player ranking system ranging from "Silver 1" to "The Global Elite" -displayed below-</li>
</ul>
<br>
<h4>Ranked Chart</h4>
<img class="rankScreen" src="https://steamuserimages-a.akamaihd.net/ugc/532871246070774091/31403BEFD00407DF9D16EBDDE500EB7FE32E18B3/" alt="CS:GO Ranked Chart">
<p class="pStyle2 text-center">You can find more information about the game on their websiteHERE
</p>
<br>
<br>
<br>
<p class="credit">Written and Coded by Dalan Ienatsch</p>
</div>
</div>
I'm making a portfolio for some projects I've worked on whilst learning to code. I've added a banner to the top of each project's webpage, but I'm having issues with a site which is unresponsive (Jubilee Austen page).
Using the Chrome Inspector tool, it says the banner is 55px tall, but it appears smaller than it does on another project page (Rogue Pickings page), where the height of the banner is also 55px. How could this be?
Jubilee Austen page
Rogue Pickings page
Does anyone know how I can fix this so that both banners appear the same height?
Thanks so much in advance!
/* ===== JUBILLEE AUSTEN ===== */
font-family: atelas;
src :url('../fonts/atelas/atelas.ttf') format('opentype');
}
/* -------- PORTFOLIO BANNER & MANAGEMENT -------- */
.back {
width: 100%;
background-color: #1D2120;
padding: 10px 0;
position: fixed;
top: 0px;
}
.div-link {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
background-image: url('empty.gif');
}
.back-wrap {
width: 90%;
margin: auto;
}
.chevron {
margin: 0;
}
.chevron img {
width: 35px;
float: left;
margin-right: 1.5%;
}
.back-text {
margin: 0 0 0 3%;
font-family: atelas;
font-size: 6em;
color: #e2e2e2;
text-decoration: none;
line-height: 0.8;
display: none;
}
#example {
clear: both;
padding-top: 50px;
}
/* ======== ORIGINAL CSS ======== */
/* -------- START OF ORIGINAL CSS -------- */
body {
font-family: 'Source Sans Pro', sans-serif;
}
#about, #work, #contact {
height: 600px;
}
/***** GRID *****/
.full-width {
width: 1200px;
margin: 0 auto;
}
.half-width {
width: 600px;
float: left;
}
.third-width {
width: 400px;
float: left;
}
/***** HEADER *****/
header {
height: 800px;
background: url('../img/hero.png');
background-size: cover;
}
header h1 {
padding: 50px 0;
font-family: 'Lora', serif;
font-size: 30px;
color: #BBC085;
padding-left: 80px;
}
#nav {
float: right;
padding: 75px 0;
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-transform: uppercase;
text-decoration: none;
font-size: 18px;
color: #828282;
padding-left: 80px;
}
header h2 {
width: 1000px;
clear: both;
font-family: 'Lora', serif;
font-size: 72px;
line-height: 80px;
color: #9a9a9a;
padding: 20px 0 0 80px;
}
header h2 span {
color: #262a2b
}
/***** ABOUT *****/
#about .full-width {
padding: 80px 0;
}
#about h2 {
font-family:'Lora', serif;
font-size: 36px;
}
#about p {
font-size: 21px;
color: #7F7F7F;
line-height: 42px;
padding-right: 50px;
}
/***** WORK *****/
#work {
background: #F9CEB7;
text-align: center;
}
#work .full-width {
padding: 115px 0;
}
#work img {
padding-bottom: 30px;
}
#work h3 {
font-size: 24px;
width: 180px;
margin: 0 auto;
}
#work p {
font-family: 'Lora', serif;
font-size: 18px;
line-height: 30px;
color: #262a2b;
padding: 0 35px;
}
/**** CONTACT *****/
#contact {
background: #EBEBEB;
}
#contact .full-width {
padding: 110px 0;
}
#contact img#contact-img {
border: 16px solid #ffffff;
}
#contact h2, #contact #email-header, #contact #socialmedia-header, #contact ul {
padding-left: 115px;
}
#contact #envelope {
padding: 0 10px 0 115px;
}
#contact h2 {
font-family: 'Lora', serif;
font-size: 36px;
}
#contact #email-header{
font-size: 32px;
font-weight: 400;
margin: -30px 0 5px 0;
}
#contact #socialmedia-header {
font-weight: bold;
font-size: 29px;
margin: 40px 0 0px 0;
}
#contact a {
text-decoration: none;
color: #C49075;
font-weight: bold;
font-size: 28px;
}
#contact ul {
list-style: none;
}
#contact ul li {
display: inline-block;
}
#contact ul img {
font-size: 32px;
padding-right: 48px;
}
/* ======== END ORIGINAL CSS ======== */
/* TABLET */
#media all and (min-width: 768px) {
}
#media screen and (min-width: 940px) {
/* -------- PORTFOLIO BANNER CSS -------- */
.chevron img {
width: 30px;
}
.back-text {
font-size: 3em;
}
}
<!doctype html>
<!-- JUBILEE AUSTEN -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Jubilee Austen | Developer</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- FONTS -->
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- PORTFOLIO BANNER -->
<section class="back">
<a class="div-link" href="../index.html"><span></span></a>
<div class="back-wrap">
<figure class="chevron">
<img src="../img/chevron-b.png" />
<img src="../img/chevron-g.png" />
<img src="../img/chevron-o.png" />
<img src="../img/chevron-r.png" />
</figure>
<p class="back-text">back</p>
</div>
</section>
<!-- START OF ORIGINAL BODY -->
<div id="example">
<!-- NAV/TITLE PANEL -->
<header>
<div class="full width">
<div class="half-width">
<h1>Jubilee Austen</h1>
</div>
<!-- NAV BAR -->
<div class="half-width" id="nav">
<nav>
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
<!-- <span>Hi,</span> used to change colour of just "Hi," text -->
<h2><span>Hi,</span> I'm a developer that loves clean & elegant code.</h2>
</div>
</header>
<main>
<!-- ABOUT PANEL -->
<section id="about">
<div class="full-width">
<h2>A little bit about me.</h2>
<div class="half-width">
<p>I've made my home base in Providence, Rhode Island with my small growing family. My journey into tech started with a degree in journalism. As I started sharing my writing online, I was fascinated with how easily I could get my voice out there. I was hooked and wanted to learn how to build my own site to fit my own specific needs.</p>
</div>
<div class="half-width">
<p>That curiosity then opened a door that could never be shut. When I learned how to build my first website, I realized I found something that gave me the freedom & versatility I was looking for in my work. Now I've made a full switch to front-end development, where I can use my organization skills and eye for detail to write clean, elegant code.</p>
</div>
</div>
</section>
<!-- PROCESS PANEL -->
<section id="work">
<div class="full-width">
<div class="third-width">
<img src="img/icon-html.png" alt="HTML icon"/>
<h3>Hand-Coded HTML</h3>
<p>My focus is writing clean, well-formatted, semantic HTML5 by hand to make sure that the content is easy to read, easy to collaborate, trouble-shoot and accessible.</p>
</div>
<div class="third-width">
<img src="img/icon-css.png" alt="CSS icon"/>
<h3>Well-Organized CSS</h3>
<p>I pride myself on writing CSS that is easy to read and build on. I focus on keeping my CSS lean and fast to load, and I make it a habit to stay up to date on current best practices.</p>
</div>
<div class="third-width">
<img src="img/icon-pencil.png" alt="Pencil icon"/>
<h3>Easy Converting PSD to HTML</h3>
<p>You can trust me to take a designer's PSD and quickly & accurately convert it into a webpage that is pixel-perfect match.</p>
</div>
</div>
</section>
<!-- CONTACT PANEL -->
<footer id="contact">
<div class="full-width">
<div class="half-width">
<img id="contact-img" src="img/contact.png" alt="Person typing at laptop"/>
</div>
<div class="half-width" id="contact-info">
<h2>Like what you see?</h2>
<h3 id="email-header">Let's meet for a cup of coffee.</h3>
<img id="envelope" src="img/icon-envelope.png" alt="mail icon"/>hi#jubileeausten.com
<h4 id="socialmedia-header">Or, find me on the interwebs</h4>
<!-- ICON LINKS -->
<ul>
<li><img src="img/icon-twitter.png" alt="Twitter icon"/></li>
<li><img src="img/icon-tumblr.png" alt="Tumblr icon"/></li>
<li><img src="img/icon-instagram.png" alt="Instagram icon"/></li>
<li><img src="img/icon-linkedin.png" alt="Linkedin icon"/></li>
<li><img src="img/icon-github.png" alt="GitHub icon"/></li>
</ul>
</div>
</div>
</footer>
</main>
<!-- END OF ORIGINAL HTML -->
</div>
</body>
</html>
/* ===== ROGUE PICKINGS ===== */
/* =========================================================================
Author's custom styles
========================================================================== */
#font-face {
font-family: atelas;
src :url('../fonts/atelas/atelas.ttf') format('opentype');
}
/* -------- PORTFOLIO BANNER & MANAGEMENT -------- */
.back {
width: 100%;
background-color: #1D2120;
padding: 10px 0;
position: fixed;
top: 0px;
}
.div-link {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
background-image: url('empty.gif');
}
.back-wrap {
width: 90%;
margin: auto;
}
.chevron {
margin: 0;
}
.chevron img {
width: 35px;
float: left;
margin-right: 1.5%;
}
.back-text {
margin: 0 0 0 3%;
font-family: atelas;
font-size: 6em;
color: #e2e2e2;
text-decoration: none;
line-height: 0.8;
display: none;
}
#example {
max-width: 1200px;
margin: auto;
clear: both;
padding-top: 55px;
}
/* ======== ORIGINAL ROGUE PICKINGS CSS ======== */
html {
font-size:16px;
}
body {
/*max-width: 1200px; --- REMOVED FOR PORTFOLIO BANNER --- */
margin: 0 auto;
font-size: 1em;
font-family: Montserrat, Helvetica, Arial, sans-serif;
}
header {
font-size: 1em;
}
.top-section {
font-size: 1em;
}
.bottom-section {
font-size: 1em;
}
footer {
font-size: 1em;
}
header, .top-section, .bottom-section, footer {
max-width: 90%;
}
h1, h3, h4 {
text-transform: uppercase;
}
h1 {
color: black;
font-size: 1.875em;
text-align: center;
width: auto;
padding: 2.45% 0;
}
h3 {
color: black;
font-size: 1.125em;
text-align: center;
padding: 15px;
}
h4 {
color: black;
font-size: 0.75em;
}
.main-title h3 {
text-align: left;
padding: 5px 0px;
text-transform: uppercase;
color:#77a466;
}
/*The widths are in a percentage!*/
header {
width: 100%;
height: 10%;
margin: 0 auto;
}
header .heading {
border-bottom:3px solid #77a466;
height: auto;
}
header span {
color: #77a466;
}
header nav {
padding: 8% 0px;
margin:auto;
}
header nav a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 0.875em;
padding: 0 10px 20px 10px;
color:#77a466;
display: block;
text-align: center;
}
#last-nav {
padding: 0 10px;
}
/*The widths are in a percentage!*/
.top-section, .bottom-section {
width: 100%;
margin: 0 auto;
clear: both;
}
.main-image {
width: 100%;
height: auto;
float: left;
clear: both;
}
.main-image img {
width: 100%;
border-bottom:3px solid #77a466;
border-top: 3px solid #77a466;
}
.main-title {
width: 100%;
height: auto;
float: left;
}
.main-title p {
padding: 0px;
line-height: 156.25%;
font-size: 1em;
}
.section-one, .section-two, .section-three {
width: 100%;
height: auto;
clear: both;
border-top: 1px solid #eee;
}
.section-one h4, .section-two h4, .section-three h4 {
padding: 10px 30px 10px 0px;
}
.menu {
list-style: none;
padding: 0px 30px 0px 0px;
}
.menu li {
padding: 10px 0;
color:#77a466;
}
.reviews {
color: #333;
line-height: 135%;
font-size: 1em;
}
.address {
font-size: 1em;
line-height: 150%;
}
.reviews, .address {
padding: 0px 30px 0px 0px;
}
/*The widths are in a percentage!*/
footer {
width: 100%;
height: 50px;
border-top:3px solid #eee;
margin: 0 auto;
clear: both;
text-align: center;
}
footer span {
font-family: "Wisdom Script", script;
text-transform: lowercase;
color: #77a466;
font-size: 0.875;
}
#media all and (min-width: 600px) and (max-width: 939px) {
header nav {
padding: 3.75% 0px;
}
}
#media screen and (min-width: 940px) {
/* -------- PORTFOLIO BANNER CSS -------- */
.chevron img {
width: 30px;
}
.back-text {
font-size: 3em;
}
#example {
width: 96%;
padding: 40px 2% 0 2%;
}
/* -------- ORIGINAL CSS -------- */
body {
/*width: 96%; --- REMOVED FOR PORTFOLIO BANNER --- */
/*padding: 0 2%; --- REMOVED FOR PORTFOLIO BANNER --- */
}
header, .top-section, .bottom-section, footer {
max-width: 100%;
}
header h1 {
text-align: left;
float: left;
}
header {
height: 100px;
}
header .heading {
border-bottom: none;
}
header nav {
float: right;
width: auto;
padding: 45px 0px;
}
header nav a {
display: inline;
}
.section-one, .section-two {
border-right: 1px solid #eee
}
.section-one h4 {
padding: 10px 0px;
}
.section-two h4, .section-three h4 {
padding: 10px 30px;
}
.menu {
padding: 0px;
}
.reviews, .address {
padding: 0px 30px;
}
.section-one, .section-two, .section-three {
width: 33%;
height: auto;
clear: none;
float: left;
border-top: 1px solid #eee;
}
}
/* -------- END ORIGINAL CSS -------- */
<!doctype html>
<!-- ROGUE PICKINGS -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Rogue Pickings</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- PORTFOLIO BANNER -->
<section class="back">
<a class="div-link" href="../index.html"><span></span></a>
<div class="back-wrap">
<figure class="chevron">
<img src="../img/chevron-b.png" />
<img src="../img/chevron-g.png" />
<img src="../img/chevron-o.png" />
<img src="../img/chevron-r.png" />
</figure>
<p class="back-text">back</p>
</div>
</section>
<!-- START OF ORIGINAL BODY -->
<div id="example">
<!-- MODULE: Logo & Nav -->
<header>
<div class="heading">
<h1><span>rogue</span> pickings</h1>
</div>
<nav>
About
Menu
Locations
Gallery
Reviews
<a id="last-nav" href="#contact">Contact</a>
</nav>
</header>
<!-- MODULE: Top Section -->
<div class="top-section">
<div class="main-image"><img src="img/download.jpg" />
</div>
<div class="main-title" id="about">
<h3>Welcome to our little corner of the internet!</h3>
<p>Welcome to Rogue Pickings, the roaming truck bringing you the freshest ingredients and ideas in food. Our team works hard so you can be sure our ingredients are always fresh and picked carefully. Our menu changes every day and is made with you in mind. We can't wait to come to you! Check out our locations to see where you can find us. </p>
</div>
</div>
<!-- MODULE: Bottom Section -->
<div class="bottom-section">
<div class="section-one" id="menu"><h4>Today's Specials</h4>
<ul class="menu">
<li>Flaming Hummus & Falafel Salad</li>
<li>Sizzling Bean Burrito</li>
<li>Green Gloves Tamales</li>
</ul>
</div>
<div class="section-two" id="reviews"><h4>Our Awesome Reviews</h4>
<p class="reviews">"I got so excited about the yumminess of the falafel salad that I am typing this review as I inhale my lunch. Yes it is that good.... Service was super friendly and quick. Can't wait see you Rogue Pickings again tomorrow!"</p>
</div>
<div class="section-three" id=contact><h4>Contact</h4>
<p class="address">1001 Potrero Avenue<br>
San Francisco, CA 94110<br>
(415) 206-8000 </p>
</div>
</div>
<!-- MODULE: Footer -->
<footer>
<h4>Powered by lots of <span>fresh</span> ingredients.</h4>
</footer>
<!-- END OF ORIGINAL ROGUE PICKINGS HTML -->
</div>
</body>
</html>
i cant remember if zoom level is persistant on an iphone but it is on desktop browsers, could you have zoomed in/out of one of them? is there a way of making sure you are at 100% zoom?
Edit
is the smaller one contained in a set of tags that is smaller than 55px? as that would cause it to be restricted to the smaller size
Your banner is not responsive, its height is fixed (55px). If the site is being displayed differently - different viewport zoom, your banner will seems to be smaller/larger.
Check the viewport meta tag in those sites:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If the initial-scale is different or if one of the pages is missing the viewport tag it can explain the differences.
As mentioned before, the zoom affects the presented width and this affects the visual size of your banner. If you want it to be responsive, you should change the height units into percentage instead of pixels.
EDIT
The first page is much wider than the second, when you zoom out to see all the page it changes the visual height of your banner.
my website is essentially styled to be a full screen site, taking up any available space it can to show the website. As a result, the contents of the page has to automatically adjust to the screen size it's displaying on.
For some elements I have used float so that paragraphs can appear side-by-side to each other, and as a result I had to float the footer so that if the height of the content area increases the footer will move down to accommodate for the extra space the main text needs to take up.
Without float, the footer will not move down and the main content will overflow on to it should someone have a narrow screen.
Because of this, the main content area and the footer trails off the side of the screen on an iPad. I know this is an issue with the float because the header doesn't do it; only the content area and the footer.
I would like to fix this but not sure what to do.
The website is http://neerajmorar.co.uk
It works perfectly on PC, Linux and I assume the Mac since it works fine on Safari, but not on the iPad.
HTML code for index page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Neeraj Morar | Home</title>
<meta charset="UTF-8">
<meta name="description" content="This is the personal website of Neeraj Morar.">
<meta name="keywords" content="Neeraj, Morar, neerajmorar, neerajmorar.co.uk, personal, website, portfolio, home, computing, information, systems, university, of, west, london, sql, server, web, design">
<meta name="google-site-verification" content="k3NDZl5POUlqaDoEEOTdrX50XrOcQ9nmQr9IFJK1NlU" />
<meta name="msvalidate.01" content="6F4E786D9BE746A1AC789E62D2C0F961" />
<link type="text/css" rel="stylesheet" href="StyleSheet1.css">
<link type="text/css" rel="stylesheet" href="mobile.css" media="only screen and (max-device-width: 480px)">
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script>(function (a, b) { if (/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) window.location = b })(navigator.userAgent || navigator.vendor || window.opera, 'http://m.neerajmorar.co.uk');</script>
<script type="text/javascript">
$(document).ready(function () {
$(".content").css("display", "none");
$(".content").fadeIn(5000);
if ($(".header a").click(function (event) {
event.preventDefault();
linkLocation = this.href;
$(".content").fadeOut(1000, redirectPage);
}));
else if ($(".transition").click(function (event) {
event.preventDefault();
linkLocation = this.href;
$(".content").fadeOut(1000, redirectPage);
}));
function redirectPage() {
window.location = linkLocation;
}
});
</script>
</head>
<body>
<div class="header">
<ul class="index">
<li>NeerajMorar.co.uk</li>
</ul>
<ul class="nav">
<li class="links">Home</li>
<li class="links">About Me</li>
<li class="links">Computing Skills</li>
<li class="links">Web Design</li>
<li>Contact</li>
</ul>
</div>
<div class="box">
<div class="content">
<div class="hello">
<h2>Hello, I'm Neeraj</h2>
<p>Business Systems Apprentice at Stanmore College, Student at University of West London, and TIME's Person of the Year 2006. (No, seriously, it's true!)</p>
</div>
<div class="taken">
<h2>I have a very particular set of skills...</h2>
<p>Oh, boy, do I! Pianist at heart (or a pedantic Organist, depending on how you look at it), a Black Belt in Tae Kwon Do, and a true nerd - not a skill, but I thought it would be nice to throw it in there!</p>
</div>
<div class="site">
<h2>This site?</h2>
<p>This website has been designed to give you an overview of who I am and what I do; it's a chance for you to be seduced by me! Please feel free to look around, and don't hesitate to contact me.</p>
</div>
</div>
</div>
<div class="footer">
<div class="info">
<a href="http://www.w3.org/html/logo/">
<img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3.png" width="133" height="64" alt="HTML5 Powered with CSS3 / Styling" title="HTML5 Powered with CSS3 / Styling">
</a>
<small>© Copyright 2013 by Neeraj Morar. All Rights Reserved.</small>
</div>
</div>
</body>
</html>
CSS code:
#font-face
{
font-family: "Skolar OT";
src: url("fonts/SKOLAR-REGULAR-PVT.OTF");
}
html
{
overflow-y: scroll;
overflow-x: hidden;
}
body
{
font-family: "Skolar OT", Calibri, Arial, sans-serif;
margin-top: -18px;
margin-left: auto;
margin-right: auto;
text-align: justify;
font-size: larger;
background-color: #e6e6e6;
}
.header
{
height: 224px;
background-color: #ab0000;
box-shadow: 0px 4px 5px #696969;
}
.index
{
display: block;
position: relative;
top: 44%;
width: 505px;
margin-left: auto;
margin-right: auto;
}
.index li
{
display: inline;
font-size: 300%;
}
.nav
{
position: relative;
top: -83px;
margin-left: auto;
margin-right: auto;
width: 670px;
background-color: #780000;
padding: 10px;
border-radius: 0px 0px 3px 3px;
}
.nav li
{
display: inline;
font-size: x-large;
padding-left: 10px;
}
.links
{
border-style: none solid none none;
border-width: 2px;
padding-right: 10px;
}
.header a
{
color: #fff;
transition: 0.7s;
}
.header a:hover
{
color: #d2d2d2;
}
.box
{
margin-top: 10px;
min-height: 560px;
border-style: none;
margin-left: auto;
margin-right: auto;
background-color: #e6e6e6;
padding: 25px;
}
.content
{
max-width: 1500px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
}
.footer
{
float: left;
width: 97.45%;
background-color: #780000;
height: 83px;
padding: 25px;
}
.footer small
{
position: relative;
display: block;
top: 10px;
color: #e6e6e6;
}
.hello
{
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.taken
{
max-width: 600px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
.site
{
max-width: 600px;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
}
.about
{
width: 47.5%;
float: left;
margin-right: 5%;
}
.job
{
width: 47.5%;
float: left;
}
.ambition
{
width: 47.5%;
float: left;
margin-right: 5%;
}
.other
{
width: 47.5%;
float: left;
}
.compute
{
max-width: 600px;
font-size: larger;
margin-left: auto;
margin-right: auto;
}
.web
{
width: 40%;
float: left;
margin-left: 8%;
margin-right: 5%;
}
.software
{
width: 40%;
float: left;
}
.web2
{
max-width: 700px;
font-size: x-large;
margin-left: auto;
margin-right: auto;
}
.contact
{
margin-left: 22%;
margin-right: 22%;
}
#smooth
{
width: 100%;
float: left;
}
a
{
text-decoration: none;
color: black;
}
fieldset
{
border-style: none;
border-color: black;
border-width: 1px;
}
textarea
{
font-family: Arial, sans-serif;
background-color: #fff;
background-color: rgba(203, 203, 203, 0.5);
border-color: black;
border-width: 1px;
}
input[type="text"]
{
font-family: Arial, sans-serif;
background-color: #fff;
background-color: rgba(203, 203, 203, 0.5);
border-color: black;
border-width: 1px;
}
input[type="email"]
{
font-family: Arial, sans-serif;
background-color: #fff;
background-color: rgba(203, 203, 203, 0.5);
border-color: black;
border-width: 1px;
}
li a.transition
{
font-weight: bold;
transition: 0.5s;
}
li a.transition:hover
{
opacity: 0.5;
}
li a.transition:active
{
color: #000;
}
.content p a.transition
{
font-weight: bold;
transition: 0.5s;
}
.content p a.transition:hover
{
opacity: 0.5;
}
.content p a.transition:active
{
opacity: 0.5;
}
.a1
{
font-weight: bold;
transition: 0.5s;
}
.a1:hover
{
opacity: 0.5;
}
#a1
{
font-weight: bold;
transition: 0.5s;
}
#a1:hover
{
opacity: 0.5;
}
You can just view the source code of my website and the style sheet from there...
Try using clear:both before footer and use overflow:hidden in your content area. That way you can get rid of the floats.