I’m making a small website to host my music, where each section has its own layout. My problem is with this specific page - https://terramsc.github.io/vault/for-zofia.html
I’ve decided to position an MP3 player on the bottom of the site, in a fixed div stuck to the bottom. It looks OK everywhere, except Safari mobile browser. It appears cut and I don’t know how am I supposed to fix it.
<head>
<meta charset="utf-8">
<title></title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
</head>
<style>
/* GET RID OFF TUMBLR BS */
#tumblr_controls,
.controls {
display: none !important;
}
#tumblr_controls {
display: none;
}
iframe:first-child {
display: none !important;
}
iframe:nth-child(2) {
display: none;
}
.app-cta-button {
opacity: 0 !important;
}
.tmblr-iframe--app-cta-button {
display: none !important;
}
.tmblr-iframe-compact .tmblr-iframe--unified-controls {
display: none;
}
#search {
display: none;
}
/* HTML & BODY */
html,
body {
margin: 0;
background-color: #B16791;
}
html,
body,
{
font-family: 'Inter', sans-serif;
}
/* MAIN CENTERED DIV WITH A PIC */
.outer {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
max-width: 600px;
width: 100%;
text-align: center;
color: white;
/* Whatever width you want */
}
/* GO BACK BUTTON */
input[type=button] {
margin: 20px 0px 0px 20px;
padding: 0;
position: fixed;
height: 100px;
width: 100px;
border-radius: 100px;
background: #B16791;
border: 1px solid #B16791;
font-weight: 1000;
font-size: 48px;
background-image: url("https://i.imgur.com/mojAVpi.gif");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 100%;
z-index: 99;
}
input[type=button]:hover {
cursor: pointer;
}
/* SOMGS */
#somgs {
font-family: 'Press Start 2P', cursive;
color: white;
position: fixed;
bottom: 20px;
left: 20px;
width: 600px;
}
#somgs2 {
font-family: 'Press Start 2P', cursive;
color: white;
position: fixed;
display: none;
bottom: 40px;
left: 40px;
right: 40px;
font-size: 36px;
}
audio {
border-radius: 100px;
right: 0;
width: 100%;
}
/* OTHER */
#top_text {
font-family: 'Press Start 2P', cursive;
color: white;
width: 100%;
text-align: center;
padding-top: 20px;
}
#media only screen and (max-width: 1000px) {
.subtitle {
font-size: 42px;
}
input[type=button] {
height: 140px;
width: 140px;
cursor: pointer;
}
#somgs {
display: none;
}
audio {
border-radius: 100px;
width: 100%;
}
#somgs {
display: none;
}
#somgs2 {
display: initial;
left: 0;
right: 0;
padding: 0px 40px 0px 40px;
}
#top_text {
padding-top: 72px;
font-size: 36px;
}
}
</style>
<script type="text/javascript">
document.getElementById("button").onclick = function() {
location.href = "https://terramsc.github.io/vault/index.html";
};
</script>
<body>
<div id="button"><input type="button" value="" onclick="location.href = 'https://terramsc.github.io/vault/';"></div>
<div class="outer">
<div class="middle">
<div class="inner">
<img src="https://i.imgur.com/nc24BBo.gif" width="100%">
</div>
</div>
</div>
<div id="somgs">
<p>"I couldn't say goodbye"</p>
<p>v0.1 - 17.04.2022</p>
<audio controls>
<source src="https://drive.google.com/file/d/1eFnqeF0wmRhAXwG8UrYWWpYgiyteEbnu" type="audio/mpeg" /></audio>
</div>
<div id="somgs2">
<p>"I couldn't say goodbye"</p>
<p>v0.1 - 17.04.2022</p>
<audio controls>
<source src="https://drive.google.com/file/d/1eFnqeF0wmRhAXwG8UrYWWpYgiyteEbnu" type="audio/mpeg" /></audio>
</div>
<div id="top_text">
sleep tight
</div>
</body>
</html>```
[1]: https://i.stack.imgur.com/xeFLt.jpg
Related
I was told to add a fixed nav bar to the code I had made previously.
Here is the CSS for the code. I reviewed it a lot but can't seem to find the issue with it.
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: auto;
/* overflow: hidden;*/
background-color: #c4a1a2;
}
.container {
position: relative;
text-align: center;
color: white;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1{
text-align: center;
color: #ffffff;
font-size: 5vw;
}
h2{
text-align: center;
color: #ffffff;
font-size: 3vw;
}
.table{
width: 100%;
/* height: 00px;*/
}
.table img{
width: 49.5%;
}
.table td{
width: 49.5%;
}
#wrapper
{
width: 99%;
/* max-width: 1500px;*/
min-width: 700px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
/* box-shadow: 3px 3px 3px #666666;*/
}
.navbar {
/*
overflow: hidden;*/
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
Here's the actual code. I think it's an issue with the container class but I'm not sure. When I commented out the Wrapper ID it was like the nav bar didn't even exist.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kayak Spot</title>
<link rel="icon" type="image/x-icon" href="images\RVC-Circles-Logo.jpg">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="layout.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght#200&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
Home
News
Contact
</div>
<div id="wrapper">
<div class="container">
<img src="Images/woman-kayaking.jpg" alt="Kayaking" style="width:100%;">
<div class="centered">
<h1>Kayaking, The pastime to calm your nerves.</h1>
</div>
</div>
<div class="table container">
<tr>
<td><img src="Images/sport%20(1).jpg">
<div class="centered">
<h2>Be it for sport or for leisure, Kayaking is one activity you can't miss.</h2>
</div>
</td>
<td><img src="Images/sport%20(2).jpg"></td>
</tr>
</div>
</div>
</body>
</html>
If you want to have a fixed bar at the top of the page, use this piece of code for the navbar class in your css. With this piece of code, your navbar class will be placed at the top of the page.
.navbar {
background-color: #333;
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
}
.navbar a {
display: flex;
justify-content: center;
align-items: center;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
Better than using a flex display.
If the navbar falls on the rest of the elements, just give the body or #wrapper margin
#wrapper {
width: 99%;
margin-top: 50px;
}
or
body {
margin-top: 50px;
}
I've been playing about with media queries in hopes of getting my head around creating a responsive page.
I seem to have got it working but I've noticed that my hover effects in the navbar <li> items are no longer working when I reduce the page size to meet the media query regarding the smaller screen...is this just something that happens when you reduce the screen size or is it been overridden somewhere?
html {
scroll-behavior: smooth;
}
body{
font-family: 'Nunito';
background: linear-gradient(#47585B, #E8EFF0);
}
h1 {
letter-spacing: 2px;
}
h2 {
letter-spacing: 2px;
/* border: 1px solid black; */
}
/* Underline on Company Name */
h1::after{
content: "";
display: block;
position: absolute;
left: 0;
width: 100%;
height: 0px;
margin-top: 0.1em;
padding-top: 0.25rem;
background: linear-gradient(90deg, #47585B, #47585B20);
}
header {
background-color: #e6763c90;
box-sizing: border-box;
padding: 0 2rem;
box-shadow: 2px 0px 100px 10px #e6763c90;
text-align: center;
position: fixed;
top: 0px;
right: 0px;
width: 100vw;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1;
}
ul {
margin: 0;
padding: 20px;
list-style: none;
/* border: 1px solid black; */
}
a {
color: black;
text-decoration: none;
}
li {
display: inline-block;
padding: 7px;
margin: 0 0 0 2.5em;
text-align: center;
border-radius: 5px;
transition: all 0.2s ease;
}
.container {
height: 70vh;
padding: 10rem;
text-align: center;
/* border: 1px solid black; */
}
.dropDown{
display: none;
}
/* On hover animations */
li:hover{
transform: scale(1.08);
}
/* Smaller Screen */
#media (max-width: 1100px) {
header {
background-color: #e6763c90;
box-sizing: border-box;
padding-left: 0.25rem;
right: 0px;
text-align: center;
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
li {
display: inline;
margin: 2rem;
z-index: 1000;
}
ul {
position: relative;
bottom: 1.4rem;
}
/* Adjust underline on smaller screen */
h1::after{
content: "";
display: none;
position: absolute;
width: 100%;
margin-top: 1.5em;
left: 0;
height: 0px;
padding-top: 0.25rem;
background: #47585B
}
li::after{
content: "";
position: absolute;
width: 100%;
margin-top: 1.5em;
left: 0;
height: 0px;
padding-top: 0.25rem;
background: linear-gradient(90deg, #47585B, #47585B20);
z-index: 10000;
}
}
/* Mobile */
#media (max-width: 800px) {
header {
background-color: #e6763c90;
box-sizing: border-box;
padding-left: 0.25rem;
right: 0px;
text-align: center;
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.navbar {
display:none;
margin:1.2rem;
}
/* Adjust underline on mobile */
h1::after{
content: "";
position: absolute;
width: 100%;
margin-top: 0.1em;
left: 0;
height: 0px;
padding-top: 0.25rem;
background: #47585B
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito" rel="stylesheet">
<link href="styleSheet.css" rel="stylesheet"></link>
<title>Original Tombstones</title>
</head>
<body>
<header>
<h1 class="">Original Tombstones</h1>
<ul class="navbar">
<li>New Memorials</li>
<li>Additionals</li>
<li>Renovations</li>
<li>Contact Us</li>
</ul>
</header>
<div class="container" id="home">
<h2>About Us</h2>
</div>
<div class="container" id="new">
<h2>New Memorials</h2>
</div>
<div class="container" id="additionals">
<h2>Additional Inscriptions</h2>
</div>
<div class="container" id="renovations">
<h2>Renovations</h2>
</div>
<div class="container" id="contact">
<h2>Get In Touch</h2>
</div>
</body>
</html>
I apologise in advance if my code looks messy but I've not got my head round that bit yet!
Cheers!
So without a media-query you've set the <li> elements to display: inline-block; Right now your li:hover{transform: scale(1.08);} works fine.
But then in one of your media-queries you set the <li>elements to display: inline;. Not really sure why tough, guess what you want will work with inline-block as well and this breaks the scaling right now. You're hover problem would be fixed if youjust removed the display:inline; line in youre media-query .
Try to add the following keywords: only, screen on the media queries ex:
#media only screen (max-width: 800px) {
Also add the following meta tag on your html head :
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
https://www.w3schools.com/css/css_rwd_viewport.asp
I have a problem with this code I am working on. There's a white space at the bottom of the page at 1024px width and higher that I can't get rid of.
I've tried adding a padding-bottom, checking margins, checking heights, but nothing works. I'm still a beginner so I might've missed something. Any help will be appreciated. Thanks
Screenshot
Screenshot 2
I tried the height: calc(100vh-21px); and this happened
Screenshot 3
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* STYLING */
body{
background: hsl(0, 100%, 98%);
}
/* HEADER */
.logo{
width: 28%;
margin: 1.5em;
}
.hero-mobile{
width: 100%;
}
.hero-desktop{
display: none;
}
.logo-desktop{
display: none;
}
/* MAIN SECTION */
.main{
text-align: center;
font-family: 'Josefin Sans', sans-serif;
color: hsl(0, 36%, 70%);
font-weight: 300;
font-size: 16px;
margin: 2em;
}
h1{
text-transform: uppercase;
font-weight: 300;
font-size: 2.5rem;
margin: 1em auto;
letter-spacing: 12px;
}
.soon{
font-weight: 600;
color: black;
}
.main p{
line-height: 1.5em;
}
/* EMAIL */
.email-form{
text-align: center;
width: 100%;
}
.email{
border-radius: 40px;
border: 1px solid;
color: hsl(0, 36%, 70%);
width: 70%;
height: 50px;
padding: 0px 25px;
}
.email::placeholder{
color: hsl(0, 36%, 70%);
}
.email:focus{
outline: none;
}
.btn{
width: 70px;
height: 53px;
border-radius: 40px;
border-style: none;
background:
linear-gradient(135deg, hsl(0, 80%,86%), hsl(0, 74%, 74%));
position: absolute;
right: 10%;
box-shadow: 0 5px 20px 0 hsl(0, 36%, 70%);
}
footer{
margin: 10% auto 1% auto;
}
#media only screen and (min-width: 600px){
.main{
margin: 9% 15%;
}
.main h1{
font-size: 4rem;
}
.email{
width: 50%;
}
.btn{
right: 25%;
}
.btn:hover{
width: 90px;
box-shadow: 0 5px 20px 0 hsl(0, 36%, 70%);
background:
linear-gradient(135deg, hsl(0, 80%,86%), hsl(0, 74%, 86%));
cursor: pointer;
transition: width 0.5s;
}
.btn:active{
outline: none;
}
}
/* BIG SCREEN */
#media only screen and (min-width: 1024px){
.logo{
display: none;
}
.logo-desktop{
display: block;
}
.hero-mobile{
display: none;
}
.container{
display: flex;
flex-direction: row-reverse;
height: 100vh;
max-width: 1920px;
margin-left: auto;
margin-right: auto;
}
/* MAIN SECTION */
.hero{
/* fixed resizing by putting image in css instead of html */
background: url(../images/hero-desktop.jpg) no-repeat center;
background-size: cover;
width: 40%;
}
.left{
background: url(../images/bg-pattern-desktop.svg) no-repeat center ;
background-size: cover;
width: 60%;
height: auto;
}
.text-area{
position: relative;
max-height: 1080px;
height: 100%;
}
.logo-desktop{
width: 20%;
position: absolute;
left: 20%;
top: 5%;
}
.main{
margin: 0;
padding: 0;
text-align: left;
width: 50%;
position: relative;
left: 20%;
top: 25%;
}
.main h1{
margin: 5% auto;
padding: 0;
font-size: 5em;
}
.main p{
line-height: 1.5em;
word-spacing: 3px;
}
.email-form{
margin: 0;
text-align: left;
position: absolute;
left: 19%;
bottom: 10%;
width: 60%;
height: 60px;
}
.email{
width: 70%;
height: 100%;
}
.btn{
position: absolute;
width: 110px;
height: 100%;
}
footer{
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="css/style.css">
<title>Frontend Mentor | Base Apparel coming soon page</title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600&display=swap" rel="stylesheet">
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<header>
<img class ="logo" src="images/logo.svg" alt="Base Apparel logo">
</header>
<div class="container">
<div class="hero">
<img class="hero-mobile" src="images/hero-mobile.jpg" alt="Base Apparel model">
</div>
<div class="left">
<div class="text-area">
<img class ="logo-desktop" src="images/logo.svg" alt="Base Apparel logo">
<section class="main">
<h1> We're <br> <span class="soon">
coming <br>
soon </span> </h1>
<p>Hello fellow shoppers! We're currently building our new fashion store.
Add your email below to stay up-to-date with announcements and our launch deals.</p>
</section>
<form class="email-form">
<input class="email" id="email"type="email" placeholder="Email Address" required>
<button class="btn" id="submit" type="submit">
<img src="images/icon-arrow.svg" alt="arrow icon">
</button>
</form>
<footer>
<p class="attribution">
Challenge by Frontend Mentor.
Coded by Ken Yasuge.
</p>
</footer>
</div>
</div>
</div>
</body>
</html>
Please use Chrome DevTools and inspect your text-area div, you will notice that the text area div is not starting at the top. And the problem is with a 5% top margin of your h1 inside the main class.
You can either
Use padding instead of margin: .main h1 { margin: 0; padding: 5% 0 }
Or set margin-top to 0 after the margin you're already using .main h1 { margin-top: 0 }
In your CSS file you have written an media query for BIG SCREEN. In that media query search for text-area class. And change height 100% to this -
.text-area {
position: relative;
max-height: 1080px;
height: calc(100vh - 21px);
}
Please try these. it will work
Firstly put footer under container:
<div class="container">
...
</div>
<footer>
...
</footer>
Then add styles for body :
body {
background: hsl(0, 100%, 98%);
min-height: 100%;
position: absolute;
}
and add style for footer :
footer {
position: inherit;
bottom: 0;
width: 100%;
}
Here's what it currently looks like:
What's supposed to be the header is currently transparent over the body image. I'm trying to get it to sit behind where it says "NEWS" at the top. The header image is currently inserted with <img src="https://i.imgur.com/wLTnUyF.png"> and I don't know what to add to reposition it.
(I can also add additional details if this isn't enough to get the answer I'm looking for.)
Edit: Here's the whole code: PASTEBIN
* {
background: transparent;
border: none;
margin: 0;
padding: 0;
}
.gr1,
.gr2,
.gr3,
.gr-top .tri,
.gr-top .gr h2 img,
.gr-top .gr span {
display: none;
}
.gr-top .gr {
padding-left: 0 !important;
}
/* body { background-image: url('https://i.imgur.com/iYr6KIy.png'); background-repeat: no-repeat; background-size: 950px 540px; } */
h3 {
font-size: 25px;
text-align: center;
color: #c8b46e;
background-repeat: no-repeat;
background-size: 400px;
background-position: center center;
padding: 20px;
background-image: url("https://i.imgur.com/RbBgBbv.png");
}
.scrollbox {
height: 360px;
width: 420px;
overflow: auto;
padding: 20px;
font-family: Ubuntu;
font-size: medium;
color: #aaa89e;
background: transparent;
}
.scrollbox2 {
height: 100px;
width: 360px;
overflow: auto;
padding: 20px;
font-family: Ubuntu;
font-size: medium;
color: #aaa89e;
background: transparent;
}
.gr-body .gr .grf-indent .text {
max-width: 500px;
}
.gr-body .gr .grf-indent .bottom {
position: relative;
bottom: 160px;
left: 10px;
color: #fff;
}
.gr-body .gr .grf-indent .bottom a {
color: #fff;
}
.gr-body .gr .grf-indent .bottom a:hover {
color: #c8b46e;
}
a:hover {
cursor: url(https://i.imgur.com/dg8PzHg.png), pointer;
}
body {
cursor: url(https://i.imgur.com/dg8PzHg.png), pointer;
}
.container {
position: relative;
}
.bottomleft {
position: relative;
top: 60px;
left: 10px;
font-size: 18px;
}
.topright {
position: relative;
bottom: 444px;
left: 510px;
font-size: 18px;
}
.top {
position: absolute;
top: 0px;
width: 500px;
}
img.back {
margin-top: 70px;
width: 940px;
height: 540px;
}
<!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" href="style.css">
</head>
<body>
<div class='wrap'>
<h3>NEWS</h3>
<img class="top" src="https://i.imgur.com/wLTnUyF.png">
<img class="back" src="https://i.imgur.com/iYr6KIy.png">
</div>
</body>
</html>
I am not sure what you are trying to do. But if you are trying to add an image to the header, you should do:
<!DOCTYPE html>
<html>
<header>
<img src="https://i.imgur.com/wLTnUyF.png">
</header>
<body>
<img src="bodyimage.png">
</body>
</html>
If that doesn't work, remember to actually download the image and upload it into your workspace.
I ended up figuring up a way to get the results I wanted.
What I did is I added a background specifically to .gr-top .gr h2 and then change the alignment on the text.
Now my journal skin looks like this ; Updated Preview
.gr-top .gr h2{
text-align: right;
background-repeat: no-repeat;
background-position: left left;
padding: 33px;
background-size: 600px;
background-image: url("https://i.imgur.com/wLTnUyF.png");
}
Sorry for the bad phrasing on the question. I'll try to be clearer next time.
I am trying to get rid of a thin white line that appears between the 1st 2 Div's of my website ("video_main" and "parallax"). I thought this might be an artifact of the video so I cropped the bottom in export from Premiere Pro CC but it still appears. I tried making a margin, padding and border 0px for the video_main and parallax div's but it doesn't get rid of the thin white line. Can anyone tell why it's happening? Many thanks.
<!DOCTYPE HTML>
<html>
<head>
<script src="//content.jwplatform.com/libraries/YQ8opLwo.js">
</script>
<script src="https://use.typekit.net/qkv6kzb.js"></script>
<script>
try {
Typekit.load({
async: true
});
} catch (e) {}
</script>
<script src="https://use.typekit.net/qkv6kzb.js"></script>
<script>
try {
Typekit.load({
async: true
});
} catch (e) {}
</script>
<meta charset="UTF-8">
<title>Barton's website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="video_main">
<video width="100%" height="100%" autoplay="autoplay" loop="loop" muted="muted" preload>
<source src="red_hook_rush_hour_trimmed.mp4" type="video/mp4">
</video>
<div class="content">
<h1>Barton Lewis</h1>
<h2>films about light and the urban landscape</h2>
<div class="videolinks">
<p>home</p>
<p>works</p>
<p>bio</p>
<p>CV</p>
<p>contact</p>
</div>
</div>
</div>
<div class="parallax">
<div class="container_blank_space">
<p>text</p>
</div>
<section class="wrapper_pano_and_text">
<div class="pano">
<img src="https://bartonlewisfilm.com/barton-3.jpg" alt="barton" width="auto" height="auto" />
</div>
<div class="pano_text">
<p>text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here.</p>
</div>
</section>
</div>
</body>
</html>
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
paragraph {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*THIS IS THE END OF THE MYER RESET*/
body {
width: 100%;
margin: 0 auto 0;
}
a {
font-family: "europa", sans-serif;
text-align: left;
text-decoration: none;
letter-spacing: 3px;
font-size: 22px;
color: white;
}
a:hover {
text-decoration: underline;
}
.parallax {
/* The image used */
background-image: url("https://bartonlewisfilm.com/html_bckgd_1024.jpg");
/* Set a specific height */
height: 1620px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.video_main {
margin: 0 auto 0;
width: 100%;
height: auto;
overflow: hidden;
}
.video_main video {
/*width: 100%;*/
width: 100%;
height: auto;
min-width: 720px;
margin: 0 auto;
z-index: -1500;
}
.content h1 {
font-family: "jaf-domus-titling-web", sans-serif;
color: white;
text-align: center;
font-size: 400%;
letter-spacing: 4px;
z-index: 100;
position: absolute;
top: 50px;
}
.content h2 {
font-family: "europa", sans-serif;
color: white;
text-align: center;
font-size: 225%;
letter-spacing: 6px;
z-index: 100;
position: absolute;
top: 175px;
}
.content p {
font-family: "europa", sans-serif;
color: white;
font-size: 120%;
}
h1 {
width: 100%;
}
h2 {
width: 100%;
}
.content .videolinks {
position: absolute;
top: 20px;
left: 20px;
z-index: 100;
}
.videolinks p {
padding: 20px;
padding-left: 60px;
}
.videolinks p:first-child {
padding-top: 250px;
}
.wrapper_pano_and_text {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
padding-top: 0px;
justify-content: center;
align-items: center;
}
.pano img {
width: 100%;
height: 100%;
padding: ;
z-index: -1500;
}
.pano_text {
width: 45%;
overflow: hidden;
z-index: 100;
position: absolute;
}
.pano_text p {
font-family: "europa", sans-serif;
font-size: 150%;
padding-right: 80px;
letter-spacing: px;
color: white;
font-weight: 500;
line-height: 135%;
font-weight: 500;
}
.container_blank_space {
height: 75px;
}
.container_blank_space p {
text-indent: -9999px;
}
Looks like your video element under .video_main is missing a value for display different from inline.
You should set its value for display (CSS) to display: block or display: flex so the parent container can adapt its height properly.
Working Codepen example. Take a look at the declaration of .video_main video.