This is my first time creating a website for a school project so bear with my messy code. My problem is that when I scroll with my nav bar that sticks to the top and it crosses over my Learn More button, the button overlaps over the NAVBar. Does anyone know how to fix this?
.container {
position: sticky;
top: 0;
position: -webkit-sticky;
background: #FACABC;
}
nav {
z-index: 9999;
}
/* Nav bar*/
.container nav {
width: 100%;
height: 76px;
font-size: 48px;
padding-left: 7em;
/* Centers "Home, About me, Socials, etc" text */
}
.container nav a {
text-align: center;
text-decoration: none;
color: #987b74;
padding-right: 100px;
}
.container nav ul {
width: 100%;
height: 100%;
margin: 0 auto;
list-style-type: none;
transition: all 0.5s ease;
}
.container nav ul li {
width: 10%;
float: left;
text-align: center;
color: #987b74;
font-size: 41px;
font-weight: bold;
transition: all 0.5s ease;
position: sticky;
cursor: pointer;
top: 0;
}
.container nav ul li:hover {
color: #5E4C47;
}
.container nav ul li ul.sub-nav {
position: absolute;
background: white;
/* Background of drop down */
width: 75%;
height: 110px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.14), -1px 0px 1px rgba(0, 0, 0, 0.14);
top: 75px;
left: 0;
visibility: hidden;
opacity: 0;
}
.container nav ul li ul.sub-nav li {
font-size: 31px;
font-family: primer, "Times New Roman", sans-sarif;
width: 75%;
}
.container nav ul li:hover ul.sub-nav
/* Drop down menu visibility */
{
visibility: visible;
opacity: 75%;
margin-top: 2px;
}
.container li {
display: inline-block;
}
.container nav ul li ul.sub-nav a:hover {
color: #5E4C47;
transition: all 0.5s ease;
}
.container nav ul li ul.sub-nav a {
padding: 0;
}
main h2 {
padding-right: 10em;
padding-left: 10em;
}
main .learn-more {
border-radius: 2px;
background-color: #FACABC;
border: none;
color: #987b74;
text-align: center;
font-size: 28px;
padding: 20px;
width: 275px;
transition: all 0.5s;
cursor: pointer;
margin: 0;
position: absolute;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: primer, "Times New Roman", sans-sarif;
}
main .learn-more span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
main .learn-more span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
main .learn-more:hover span {
padding-right: 25px;
}
main .learn-more:hover span:after {
opacity: 1;
right: 0;
}
<div id="wrapper">
<title>HighItsKy</title>
<link href="highitsky.css" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/redrock" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/primer" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<header>
<a id="homelink" href="index.html">
<h2 id="homelink">HighItsKy</h2>
</a>
<br><br><br>
<br>
<span class="title"><h1>HighItsKy</h1></span>
<h2>part time streamer, full time vibe</h2>
<br><br>
<a href="https://www.twitch.tv/highitsky/" target="_blank">
<ion-icon name="logo-twitch"></ion-icon>
</a>
<a href="https://discord.gg/M2umXEhkNq" target="_blank">
<ion-icon name="logo-discord"></ion-icon>
</a>
<a href="https://youtube.com/highitsky" target="_blank">
<ion-icon name="logo-youtube"></ion-icon>
</a>
<a href="https://www.instagram.com/highitsky_/" target="_blank">
<ion-icon name="logo-instagram"></ion-icon>
</a>
<a href="https://www.tiktok.com/#highitsky" target="_blank">
<ion-icon name="logo-tiktok"></ion-icon>
</a>
<a href="https://www.twitter.com/highitsky_/" target="_blank">
<ion-icon name="logo-twitter"></ion-icon>
</a>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<br><br><br><br><br>
</header>
<div class="container">
<nav>
<ul>
<a href="index.html">
<li>Home</li>
</a>
<li>About Me
<ul class="sub-nav">
<a href="AboutMe.html">
<li>ABOUT</li>
</a>
<a href="Cloves.html">
<li>CLOVES</li>
</a>
</ul>
</li>
<li>Socials
<ul class="sub-nav">
<a href="Socials.html">
<li>SOCIALS</li>
</a>
<a href="Contact.html">
<li>CONTACT</li>
</a>
</ul>
</li>
<a href="Community.html">
<li>Community</li>
</a>
<a href="Partnerships.html">
<li>Partnerships</li>
</a>
<li>Support
<ul class="sub-nav">
<a href="Donate.html">
<li>DONATE</li>
</a>
<a href="Merch.html">
<li>MERCH</li>
</a>
<a href="Organizations.html">
<li>OTHER</li>
</a>
</ul>
</li>
</ul>
</nav>
<div class="header"></div>
</div>
<main>
<div class="backgroundcolor">
<br><br>
<h1>High, I'm Ky
<h1><br>
<h2>I started streaming on . . . </h2>
<br>
<button class="learn-more"><span>LEARN MORE </span></button>
<br><br><br><br><br>
</div>
<div class="video-trailer">
<br><br>
<h2>My streams consist of a lot of yelling, dying, losing, and sometimes crying, but...</h2>
<br><br>
<center>
<video controls="controls" height="64%" width="62%" style='border: 2px solid #FACABC;'>
<source src="trailer.mp4" type="video/mp4">
</video>
<br><br>
<h2>what matters is that I get to spend time with the people that I love; my community!</h2>
<br><br>
</div>
<div class="backgroundcolor">
<br><br>
<h1>High-lights</h1>
<br><br>
<hr size="2" color="#987b74">
<br><br>
<ul>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HQQ3LfzPrEI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/zNUe4U8ps5k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Sh7yxSijuxI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<br><br>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/PGgvM_9pZok" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/S_M8JgzfdW4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Pk0GZE-3EqQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
</ul>
<br><br>
<hr size="2" color="#987b74">
<footer>HighItsKy © 2020 </footer>
</div>
</main>
Here you go, z-index is really good for that. When you have z-index, it's basically what you want in front. So here, I put z-index in the .container class, and you can see that the navbar is always up front.
.container
{
position: sticky;
top: 0;
position: -webkit-sticky;
background: #FACABC;
z-index:1;
}
nav
{
z-index: 9999;
}
/* Nav bar*/
.container nav
{
width: 100%;
height: 76px;
font-size: 48px;
padding-left: 7em; /* Centers "Home, About me, Socials, etc" text */
}
.container nav a
{
text-align: center;
text-decoration: none;
color: #987b74;
padding-right: 100px;
}
.container nav ul
{
width: 100%;
height: 100%;
margin: 0 auto;
list-style-type: none;
transition: all 0.5s ease;
}
.container nav ul li
{
width: 10%;
float: left;
text-align: center;
color: #987b74;
font-size: 41px;
font-weight: bold;
transition: all 0.5s ease;
position: sticky;
cursor: pointer;
top: 0;
}
.container nav ul li:hover
{
color: #5E4C47;
}
.container nav ul li ul.sub-nav
{
position: absolute;
background: white; /* Background of drop down */
width: 75%;
height: 110px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.14), -1px 0px 1px rgba(0,0,0,0.14);
top: 75px;
left: 0;
visibility: hidden;
opacity: 0;
}
.container nav ul li ul.sub-nav li
{
font-size: 31px;
font-family: primer, "Times New Roman", sans-sarif;
width: 75%;
}
.container nav ul li:hover ul.sub-nav /* Drop down menu visibility */
{
visibility: visible;
opacity: 75%;
margin-top: 2px;
}
.container li
{
display: inline-block;
}
.container nav ul li ul.sub-nav a:hover
{
color: #5E4C47;
transition: all 0.5s ease;
}
.container nav ul li ul.sub-nav a
{
padding: 0;
}
main h2
{
padding-right: 10em;
padding-left: 10em;
}
main .learn-more {
border-radius: 2px;
background-color: #FACABC;
border: none;
color: #987b74;
text-align: center;
font-size: 28px;
padding: 20px;
width: 275px;
transition: all 0.5s;
cursor: pointer;
margin: 0;
position: absolute;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: primer, "Times New Roman", sans-sarif;
}
main .learn-more span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
main .learn-more span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
main .learn-more:hover span {
padding-right: 25px;
}
main .learn-more:hover span:after {
opacity: 1;
right: 0;
}
<!DOCTYPE html>
<div id="wrapper">
<title>HighItsKy</title>
<link href="highitsky.css" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/redrock" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/primer" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<header>
<a id="homelink" href="index.html"><h2 id="homelink">HighItsKy</h2></a>
<br><br><br>
<br>
<span class="title"><h1>HighItsKy</h1></span>
<h2>part time streamer, full time vibe</h2>
<br><br>
<ion-icon name="logo-twitch"></ion-icon>
<ion-icon name="logo-discord"></ion-icon>
<ion-icon name="logo-youtube"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-tiktok"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<br><br><br><br><br>
</header>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>About Me
<ul class="sub-nav">
<li>ABOUT</li>
<li>CLOVES</li>
</ul>
</li>
<li>Socials
<ul class="sub-nav">
<li>SOCIALS</li>
<li>CONTACT</li>
</ul></li>
<li>Community</li>
<li>Partnerships</li>
<li>Support
<ul class="sub-nav">
<li>DONATE</li>
<li>MERCH</li>
<li>OTHER</li>
</ul></li>
</ul>
</nav>
<div class="header"></div>
</div>
<main>
<div class="backgroundcolor">
<br><br><h1>High, I'm Ky<h1><br>
<h2>I started streaming on Twitch in February of 2020, with my streams mainly consisting of Minecraft content!
Whether I am dying a lot in Singleplayer or getting scared by creepers, my main focus is maintaining a positive and welcoming
community in a not-so-welcoming world. I currently live in Kansas, and I am 19 years old and majoring in Computer Science at FHSU. . . </h2>
<br>
<button class="learn-more"><span>LEARN MORE </span></button>
<br><br><br><br><br>
</div>
<div class="video-trailer">
<br><br>
<h2>My streams consist of a lot of yelling, dying, losing, and sometimes crying, but...</h2>
<br><br>
<center>
<video controls="controls" height="64%" width="62%" style='border: 2px solid #FACABC;'>
<source src="trailer.mp4" type="video/mp4">
</video>
<br><br>
<h2>what matters is that I get to spend time with the people that I love; my community!</h2>
<br><br>
</div>
<div class="backgroundcolor">
<br><br>
<h1>High-lights</h1>
<br><br>
<hr size="2" color="#987b74">
<br><br>
<ul>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HQQ3LfzPrEI"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/zNUe4U8ps5k"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Sh7yxSijuxI"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<br><br>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/PGgvM_9pZok"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/S_M8JgzfdW4"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Pk0GZE-3EqQ"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
</ul>
<br><br>
<hr size="2" color="#987b74">
<footer>HighItsKy © 2020 </footer>
</div>
</main>
In order to make sure that the nav bar is above any other element in the page you should move the z-index value that you have on the nav selector to the .container class.
The two css elements will then become:
.container
{
position: sticky;
top: 0;
position: -webkit-sticky;
background: #FACABC;
z-index: 9999;
}
nav
{
}
Please note that even if it has no impact on the current issue, I would strongly encourage you to restructure the HTML code. A valid HTML document has the following top structure:
<!DOCTYPE html>
<html>
<head>
<title>HighItsKy</title>
<link href="highitsky.css" rel="stylesheet">
<!-- other links and meta-information -->
</head>
<body>
<!-- all visible elements from the document: div, p, span ... -->
</body>
</html>
Any other elements that you would like to add need to go in <head>...</head> section (external scripts or CSS, meta-information) or <body>...</body> section (visible elements).
Related
I am working on a school project and am optimizing for mobile. When I go on the website, I see a white gap on the right side of the screen (see screenshot). I have tried to do research but everything I've found doesn't work. iPhone Website. Could someone help guide me in the right direction? I have never made a website before and I just do not understand how to optimize a website at all haha
header{
background-image: url(banner1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: #FACABC;
background-position: center;
display: block;
position: relative;
}
h1, h2, h3, footer{
text-align: center;
}
h1{
color: #FACABC;
font-family: RedRock, "Times New Roman", sans-sarif;
line-height: 5px;
}
.title{
font-size: 500%;
}
h2{
font-family: primer, "Times New Roman", sans-sarif;
font-size: 200%;
text-shadow: 1px 1px 2px #FACABC;
color: #987b74;
}
#homelink{
text-align: left;
text-decoration: none;
padding-left: 2%;
font-size: 135%;
font-family: RedRock, "Times New Roman", sans-sarif;
color: #FACABC;
text-shadow: 1px 1px 2px black;
}
ion-icon{
padding-left: 6em;
font-size: 41px;
color: #987b74;
}
ion-icon:hover{
color: #FACABC;
transition: all 0.5s ease;
}
body{
font-family: RedRock, "Times New Roman", sans-sarif;
margin: 0;
/* test and see if this works wit/without below two things*/
overflow-x: hidden;
overflow-y: scroll;
}
.container{
position: sticky;
top: 0;
position: -webkit-sticky;
background: #FACABC;
z-index:1;
}
/* Nav bar*/
.container nav{
width: 100%;
height: 76px;
font-size: 48px;
}
.container nav a{
text-align: center;
text-decoration: none;
color: #987b74;
}
.container nav ul{
width: 100%;
height: 100%;
margin: 0 auto;
list-style-type: none;
transition: all 0.5s ease;
}
.container nav ul li{
width: 10%;
float: left;
text-align: center;
color: #987b74;
font-size: 41px;
font-weight: bold;
transition: all 0.5s ease;
position: sticky;
cursor: pointer;
top: 0;
}
.container nav ul li:hover{
color: #5E4C47;
}
.container nav ul li ul.sub-nav {
position: absolute;
background-color: #FACABC; /* Background of drop down */
width: 75%;
height: 110px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.14), -1px 0px 1px rgba(0,0,0,0.14);
top: 74px;
left: 0;
visibility: hidden;
opacity: 0;
}
.container nav ul li ul.sub-nav li{
font-size: 31px;
font-family: primer, "Times New Roman", sans-sarif;
width: 75%;
}
.container nav ul li:hover ul.sub-nav{ /* Drop down menu visibility */
visibility: visible;
opacity: 75%;
margin-top: 2px;
}
.container li{
display: inline-block;
}
.container nav ul li ul.sub-nav a:hover{
color: #5E4C47;
transition: all 0.5s ease;
}
.container nav ul li ul.sub-nav a{
padding: 0;
}
main h2{
padding-right: 10em;
padding-left: 10em;
}
main .learn-more{
border-radius: 2px;
background-color: #FACABC;
border: none;
color: #987b74;
text-align: center;
font-size: 28px;
padding: 20px;
width: 275px;
transition: all 0.5s;
cursor: pointer;
margin: 0;
position: absolute;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: primer, "Times New Roman", sans-sarif;
}
main .learn-more span{
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
main .learn-more span:after{
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
main .learn-more:hover span{
padding-right: 25px;
}
main .learn-more:hover span:after{
opacity: 1;
right: 0;
}
.video-trailer{
background-image: radial-gradient(#f8f8f8, #FACABC, #f8f8f8);
}
main ul li{
list-style-type: none;
display: inline;
padding-left: 2%;
padding-right: 0%;
}
main h1{
font-size: 60px;
}
footer{
color: #987b74;
}
.backgroundcolor{ /* To get that cream color background!*/
background-color: #f8f8f8;
}
table {
font-family: primer, "Times New Roman", sans-sarif;
color: #987b74;
font-weight: bold;
border-collapse: collapse;
width: 50%;
margin-left: auto;
margin-right: auto;
}
#media screen and (max-width: 640px)
{
body, html{
overflow-x: hidden;
padding: 0.8em 0;
}
}
<!DOCTYPE html>
<html>
<div id="wrapper">
<title>HighItsKy</title>
<link href="highitsky.css" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/redrock" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/primer" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<header>
<a id="homelink" href="index.html">
<h2 id="homelink">HighItsKy</h2>
</a>
<br><br><br><br>
<span class="title"><h1>HighItsKy</h1></span>
<h2>part time streamer, full time vibe</h2>
<br><br>
<ion-icon name="logo-twitch"></ion-icon>
<ion-icon name="logo-discord"></ion-icon>
<ion-icon name="logo-youtube"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-tiktok"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<br><br><br><br><br>
</header>
<div class="container">
<nav>
<ul class="tabs">
<a href="index.html">
<li>Home</li>
</a>
<li style="white-space: nowrap;">About Me
<ul class="sub-nav">
<a href="AboutMe.html">
<li>ABOUT</li>
</a>
<a href="Cloves.html">
<li>CLOVES</li>
</a>
</ul>
</li>
<li>Socials
<ul class="sub-nav">
<a href="Socials.html">
<li>SOCIALS</li>
</a>
<a href="Contact.html">
<li>CONTACT</li>
</a>
</ul>
</li>
<a href="Community.html">
<li>Community</li>
</a>
<a href="Partnerships.html">
<li>Partnerships</li>
</a>
<li>Support
<ul class="sub-nav">
<a href="Donate.html">
<li>DONATE</li>
</a>
<a href="Merch.html">
<li>MERCH</li>
</a>
<a href="Causes.html">
<li>CAUSES</li>
</a>
</ul>
</li>
</ul>
</nav>
<div class="header"></div>
</div>
<main>
<div class="backgroundcolor">
<br><br>
<h1>High, I'm Ky</h1>
<br>
<h2>I started streaming on Twitch in February of 2020, with my streams mainly consisting of Minecraft content!
Whether I am dying a lot in Singleplayer or getting scared by creepers, my main focus is maintaining a positive and welcoming
community in a not-so-welcoming world. I currently live in Kansas, and I am 19 years old and majoring in Computer Science at FHSU. . . </h2>
<br>
<button class="learn-more"><span>LEARN MORE </span></button>
<br><br><br><br><br>
</div>
<div class="video-trailer">
<br><br>
<h2>My streams consist of a lot of yelling, dying, losing, and sometimes crying, but...</h2>
<br><br>
<center>
<video controls height="64%" width="62%" style='border: 2px solid #FACABC;'>
<source src="trailer.mp4" srclang="en" type="video/mp4">
</video>
<br><br>
<h2>what matters is that I get to spend time with the people that I love; my community!</h2>
<br><br>
</div>
<div class="backgroundcolor">
<br><br>
<h1>High-lights</h1>
<br><br>
<hr size="2" color="#987b74">
<br><br>
<ul>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HQQ3LfzPrEI"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/zNUe4U8ps5k"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Sh7yxSijuxI"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<br><br>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/PGgvM_9pZok"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/S_M8JgzfdW4"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Pk0GZE-3EqQ"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
</ul>
<br><br>
<hr size="2" color="#987b74">
<footer>HighItsKy © 2020 </footer>
</div>
</main>
</html>
You should add width to your body
#media screen and (max-width: 640px)
{
body, html{
width: 100vw;
overflow-x: hidden;
padding: 0.8em 0;
}
}
header{
background-image: url(banner1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: #FACABC;
background-position: center;
display: block;
position: relative;
}
h1, h2, h3, footer{
text-align: center;
}
h1{
color: #FACABC;
font-family: RedRock, "Times New Roman", sans-sarif;
line-height: 5px;
}
.title{
font-size: 500%;
}
h2{
font-family: primer, "Times New Roman", sans-sarif;
font-size: 200%;
text-shadow: 1px 1px 2px #FACABC;
color: #987b74;
}
#homelink{
text-align: left;
text-decoration: none;
padding-left: 2%;
font-size: 135%;
font-family: RedRock, "Times New Roman", sans-sarif;
color: #FACABC;
text-shadow: 1px 1px 2px black;
}
ion-icon{
padding-left: 6em;
font-size: 41px;
color: #987b74;
}
ion-icon:hover{
color: #FACABC;
transition: all 0.5s ease;
}
body{
font-family: RedRock, "Times New Roman", sans-sarif;
margin: 0;
/* test and see if this works wit/without below two things*/
overflow-x: hidden;
overflow-y: scroll;
}
.container{
position: sticky;
top: 0;
position: -webkit-sticky;
background: #FACABC;
z-index:1;
}
/* Nav bar*/
.container nav{
width: 100%;
height: 76px;
font-size: 48px;
}
.container nav a{
text-align: center;
text-decoration: none;
color: #987b74;
}
.container nav ul{
width: 100%;
height: 100%;
margin: 0 auto;
list-style-type: none;
transition: all 0.5s ease;
}
.container nav ul li{
width: 10%;
float: left;
text-align: center;
color: #987b74;
font-size: 41px;
font-weight: bold;
transition: all 0.5s ease;
position: sticky;
cursor: pointer;
top: 0;
}
.container nav ul li:hover{
color: #5E4C47;
}
.container nav ul li ul.sub-nav {
position: absolute;
background-color: #FACABC; /* Background of drop down */
width: 75%;
height: 110px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.14), -1px 0px 1px rgba(0,0,0,0.14);
top: 74px;
left: 0;
visibility: hidden;
opacity: 0;
}
.container nav ul li ul.sub-nav li{
font-size: 31px;
font-family: primer, "Times New Roman", sans-sarif;
width: 75%;
}
.container nav ul li:hover ul.sub-nav{ /* Drop down menu visibility */
visibility: visible;
opacity: 75%;
margin-top: 2px;
}
.container li{
display: inline-block;
}
.container nav ul li ul.sub-nav a:hover{
color: #5E4C47;
transition: all 0.5s ease;
}
.container nav ul li ul.sub-nav a{
padding: 0;
}
main h2{
padding-right: 10em;
padding-left: 10em;
}
main .learn-more{
border-radius: 2px;
background-color: #FACABC;
border: none;
color: #987b74;
text-align: center;
font-size: 28px;
padding: 20px;
width: 275px;
transition: all 0.5s;
cursor: pointer;
margin: 0;
position: absolute;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: primer, "Times New Roman", sans-sarif;
}
main .learn-more span{
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
main .learn-more span:after{
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
main .learn-more:hover span{
padding-right: 25px;
}
main .learn-more:hover span:after{
opacity: 1;
right: 0;
}
.video-trailer{
background-image: radial-gradient(#f8f8f8, #FACABC, #f8f8f8);
}
main ul li{
list-style-type: none;
display: inline;
padding-left: 2%;
padding-right: 0%;
}
main h1{
font-size: 60px;
}
footer{
color: #987b74;
}
.backgroundcolor{ /* To get that cream color background!*/
background-color: #f8f8f8;
}
table {
font-family: primer, "Times New Roman", sans-sarif;
color: #987b74;
font-weight: bold;
border-collapse: collapse;
width: 50%;
margin-left: auto;
margin-right: auto;
}
#media screen and (max-width: 640px)
{
body, html{
width: 100vw;
overflow-x: hidden;
padding: 0.8em 0;
}
}
<!DOCTYPE html>
<html>
<div id="wrapper">
<title>HighItsKy</title>
<link href="highitsky.css" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/redrock" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/primer" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<header>
<a id="homelink" href="index.html">
<h2 id="homelink">HighItsKy</h2>
</a>
<br><br><br><br>
<span class="title"><h1>HighItsKy</h1></span>
<h2>part time streamer, full time vibe</h2>
<br><br>
<ion-icon name="logo-twitch"></ion-icon>
<ion-icon name="logo-discord"></ion-icon>
<ion-icon name="logo-youtube"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-tiktok"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<br><br><br><br><br>
</header>
<div class="container">
<nav>
<ul class="tabs">
<a href="index.html">
<li>Home</li>
</a>
<li style="white-space: nowrap;">About Me
<ul class="sub-nav">
<a href="AboutMe.html">
<li>ABOUT</li>
</a>
<a href="Cloves.html">
<li>CLOVES</li>
</a>
</ul>
</li>
<li>Socials
<ul class="sub-nav">
<a href="Socials.html">
<li>SOCIALS</li>
</a>
<a href="Contact.html">
<li>CONTACT</li>
</a>
</ul>
</li>
<a href="Community.html">
<li>Community</li>
</a>
<a href="Partnerships.html">
<li>Partnerships</li>
</a>
<li>Support
<ul class="sub-nav">
<a href="Donate.html">
<li>DONATE</li>
</a>
<a href="Merch.html">
<li>MERCH</li>
</a>
<a href="Causes.html">
<li>CAUSES</li>
</a>
</ul>
</li>
</ul>
</nav>
<div class="header"></div>
</div>
<main>
<div class="backgroundcolor">
<br><br>
<h1>High, I'm Ky</h1>
<br>
<h2>I started streaming on Twitch in February of 2020, with my streams mainly consisting of Minecraft content!
Whether I am dying a lot in Singleplayer or getting scared by creepers, my main focus is maintaining a positive and welcoming
community in a not-so-welcoming world. I currently live in Kansas, and I am 19 years old and majoring in Computer Science at FHSU. . . </h2>
<br>
<button class="learn-more"><span>LEARN MORE </span></button>
<br><br><br><br><br>
</div>
<div class="video-trailer">
<br><br>
<h2>My streams consist of a lot of yelling, dying, losing, and sometimes crying, but...</h2>
<br><br>
<center>
<video controls height="64%" width="62%" style='border: 2px solid #FACABC;'>
<source src="trailer.mp4" srclang="en" type="video/mp4">
</video>
<br><br>
<h2>what matters is that I get to spend time with the people that I love; my community!</h2>
<br><br>
</div>
<div class="backgroundcolor">
<br><br>
<h1>High-lights</h1>
<br><br>
<hr size="2" color="#987b74">
<br><br>
<ul>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HQQ3LfzPrEI"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/zNUe4U8ps5k"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Sh7yxSijuxI"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<br><br>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/PGgvM_9pZok"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/S_M8JgzfdW4"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Pk0GZE-3EqQ"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
</ul>
<br><br>
<hr size="2" color="#987b74">
<footer>HighItsKy © 2020 </footer>
</div>
</main>
</html>
I have a simple html to display a video but it doesn't look right. Below is the sscreenshot, HTML and CSS. How can I stop the video from overlapping and be displayed correctly?
.video-responsive {
text-align: center;
overflow: hidden;
height: 0;
}
.video-responsive iframe {
margin: 0;
padding: 0;
height: 70%;
width: 70%;
display: block;
position: absolute;
}
<p>Watch the video recording to see the whole conference</p>
<div class="video-responsive">
<iframe width="320" height="240" src="https://www.youtube.com/embed/UHpaxaJ-GgU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<br/>
<p>If you have any questions, please email us at contact#metis.com</p>
Remove position: absolute and height: 0 on the wrapper.
.video-responsive {
text-align: center;
}
.video-responsive iframe {
margin: 0;
padding: 0;
height: 70%;
width: 70%;
display: block;
}
<p>Watch the video recording to see the whole conference</p>
<div class="video-responsive">
<iframe width="320" height="240" src="https://www.youtube.com/embed/UHpaxaJ-GgU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<br/>
<p>If you have any questions, please email us at contact#metis.com</p>
Good afternoon! I have an odd issue. I'm creating a webpage just to test my newbie skills. I've created a footer that includes some images (social media icons). These images will absolutely NOT show up in the footer whenever I'm on my desktop. Whenever I'm on my laptop, they show up perfectly.
On my desktop, if I move the icons into the <main> of the html, they show. The moment I put them in my <footer> area, they disappear. Has anyone run into this before? Can someone help?
Here's the HTML code...
* {
box-sizing: border-box;
}
body {
background-color: rgb(219, 219, 219);
margin: 0;
}
/*Header CSS code*/
header {
display: flex;
flex-direction: column;
align-items: center;
}
.logo {
width: 125px;
height: 125px;
border: 2px solid black;
border-radius: 50%;
margin-top: 10px;
}
.under-logo {
display: flex;
padding: 10px;
}
.lambo-logo {
width: 145px;
height: 80px;
border-radius: 20px;
padding: 10px;
}
.title {
font-family: 'Merriweather', serif;
}
/*Navigation Bar CSS code*/
nav {
height: 50px;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: rgb(70, 70, 70);
border: 2px solid black;
}
.nav-links {
color: white;
font-size: 25px;
padding: 10px 20px;
}
.nav-links:hover {
background-color: rgb(0, 0, 150);
cursor: pointer;
transition: 0.5s;
border-radius: 50%;
}
/*Signup Form CSS code*/
.signup-title {
text-align: center;
}
form {
margin-left: auto;
margin-right: auto;
width: 500px;
border: 2px solid black;
border-radius: 40px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
margin-top: 10px;
background-color: rgb(0, 0, 150);
color: white;
}
fieldset {
border: 2px solid black;
border-radius: 40px;
width: 400px;
height: 210px;
padding: 20px;
font-size: 25px;
font-weight: bold;
margin-right: auto;
margin-left: auto;
background-color: rgb(219, 219, 219);
color: black;
}
input[type="text"],
[type="email"] {
width: 100%;
font-size: 15px;
height: 30px;
padding-left: 5px;
}
button[type="submit"] {
width: 100%;
height: 40px;
margin-top: 10px;
font-size: 20px;
font-weight: bold;
border: 2px solid black;
border-radius: 40px;
background-color: rgb(0, 0, 150);
color: white;
}
button[type="submit"]:hover {
cursor: url(Images/pagani-cursor.png) 55 55, auto;
background-color: green;
color: white;
transition: .5s;
}
/*Car CSS code - Main content of page*/
.cars {
display: flex;
flex-direction: column;
}
.car-name {
margin-top: 0px;
}
.car-stats {
margin-top: 0px;
margin-bottom: 5px;
}
.car-display {
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
padding: 20px;
border: 2px solid black;
border-radius: 40px;
margin-top: 20px;
margin-bottom: 20px;
}
.car {
width: 300px;
border-radius: 40px;
border: 2px solid black;
}
/*Footer CSS code*/
footer {
background-color: rgb(70, 70, 70);
height: 75px;
width: 100%;
position: absolute;
border: 2px solid black;
display: flex;
justify-content: center;
}
.footer-text {
color: white;
margin-top: 0;
font-family: 'Merriweather', serif;
}
.social-icons {
display: flex;
}
/*Code for larger screens*/
#media screen and (min-width: 800px) {
.cars {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
padding: 20px;
}
}
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Venny's Cars</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<!--Below is the logo and title for the website-->
<header class="header">
<img src="Images\VennyDolphin.jpg" alt="Venny with dolphin" class="logo">
<div class="under-logo">
<img src="Images/lambo-logo-reverse.png" alt="outline of car" class="lambo-logo">
<h1 class="title">Venny's Cars</h1>
<img src="Images/lambo-logo.png" alt="reverse outline" class="lambo-logo">
</div>
</header>
<!--Below is the Navigation Bar-->
<nav class="navbar">
<div class="nav-links"><a href: "#">Link</a></div>
<div class="nav-links"><a href: "#">2nd Link</a></div>
<div class="nav-links"><a href: "#">3rd Link</a></div>
</nav>
<!--Here is the signup form-->
<main>
<form class="signup-form" action="newsletter.html" method="POST">
<h1 class="signup-title">Sign Up for our Newsletter!</h1>
<fieldset class="name-email-input">
<div>
<label>First Name:</label>
<input type="text" id="firstname" name="firstname" placeholder="John" required>
</div>
<div>
<label>Email:</label>
<input type="email" id="email" name="email" placeholder="John#123.com" required>
</div>
<!--Signup Button-->
<div class="button">
<button type="submit" id="button">Sign Up!</button>
</div>
</fieldset>
</form>
<!--Below is our section for the cars-->
<div class="cars">
<!--Porsche 911 GT2 RS-->
<div class="car-display">
<h1 class="car-name">Porsche 911 GT2 RS</h1>
<img src="Images\gt2rs.jpg" class="car gt2rs" alt="Porshe 911 GT2 RS">
<ul>
<h2 class="car-stats">Car Stats</h2>
<li>Engine: 3.8-liter Twin-Turbo Flat 6</li>
<li>HP: 690hp # 7000rpm</li>
<li>Torque: 553 lb-ft # 2500rpm</li>
<li>Price: $293,200</li>
</ul>
<iframe width="560" height="315" src="https://www.youtube.com/embed/PwAhAFyMwk8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Koenigsegg One:1-->
<div class="car-display">
<h1 class="car-name">Koenigsegg One:1</h1>
<img src="Images\k1.jpg" class="car k1" alt="Koenigsegg One:1">
<ul>
<h2 class="car-stats">Car Stats</h2>
<li>Engine: 5.0-liter Twin-Turbo V8</li>
<li>HP: 1341hp # 7500rpm</li>
<li>Torque: 1010 lb-ft # 6000rpm</li>
<li>Price: $2,850,000</li>
</ul>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7X1z-1xwquk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Porsche 918 Spyder-->
<div class="car-display">
<h1 class="car-name">Porsche 918 Spyder</h1>
<img src="Images\918.jpg" class="car 918" alt="Porshe 918 Spyder">
<ul>
<h2 class="car-stats">Car Stats</h2>
<li>Engine: 4.6-liter V8 Hybrid</li>
<li>HP: 887hp # 8600rpm</li>
<li>Torque: 944 lb-ft # 5000rpm</li>
<li>Price: $845,000</li>
</ul>
<iframe width="560" height="315" src="https://www.youtube.com/embed/nSqzp3kdAm4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</main>
<!--Below is the footer-->
<footer>
<h2 class="footer-text">Follow me for new additions!</h2>
<div class="social-icons">
<img src="Images/facebook.png" alt="facebook">
<img src="Images/insta.png" alt="insta">
</div>
</footer>
<script src="script.js"></script>
<!--Link to Javascript-->
<script src="action.js"></script>
</body>
</html>
Having tested your code, this is a path issue, but you do have a couple of other errors in your code that need addressing. Your links at the top were posted as <a href:"#" >Link 1</a> etc. ; with a colon instead of an equals sign. Replace ":" with "=" in your links, even if thelinks are blank. Also, in numerous places you have backwards slashes where the slashes should be pointing forwards, as already pointed out. (only some had been corrected). For the purpose of the snippet, I commented out the links to the stylesheet in the head, as the css was in listed separately.
Regarding the path, I entered a path to a facebook icon on a website using the full domain name, and the icon showed. It was rather large, so I added a class for your social icon images to reduce the size. Adjust or remove this as you see fit, depending on the size of your icons. The main issue as I see it regarding the icons not appearing is that you need to correct the file path in your code.
Hope this helps
* {
box-sizing: border-box;
}
body {
background-color: rgb(219, 219, 219);
margin: 0;
}
/*Header CSS code*/
header {
display: flex;
flex-direction: column;
align-items: center;
}
.logo {
width: 125px;
height: 125px;
border: 2px solid black;
border-radius: 50%;
margin-top: 10px;
}
.under-logo {
display: flex;
padding: 10px;
}
.lambo-logo {
width: 145px;
height: 80px;
border-radius: 20px;
padding: 10px;
}
.title {
font-family: 'Merriweather', serif;
}
/*Navigation Bar CSS code*/
nav {
height: 50px;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: rgb(70, 70, 70);
border: 2px solid black;
}
.nav-links {
color: white;
font-size: 25px;
padding: 10px 20px;
}
.nav-links:hover {
background-color: rgb(0, 0, 150);
cursor: pointer;
transition: 0.5s;
border-radius: 50%;
}
/*Signup Form CSS code*/
.signup-title {
text-align: center;
}
form {
margin-left: auto;
margin-right: auto;
width: 500px;
border: 2px solid black;
border-radius: 40px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
margin-top: 10px;
background-color: rgb(0, 0, 150);
color: white;
}
fieldset {
border: 2px solid black;
border-radius: 40px;
width: 400px;
height: 210px;
padding: 20px;
font-size: 25px;
font-weight: bold;
margin-right: auto;
margin-left: auto;
background-color: rgb(219, 219, 219);
color: black;
}
input[type="text"],
[type="email"] {
width: 100%;
font-size: 15px;
height: 30px;
padding-left: 5px;
}
button[type="submit"] {
width: 100%;
height: 40px;
margin-top: 10px;
font-size: 20px;
font-weight: bold;
border: 2px solid black;
border-radius: 40px;
background-color: rgb(0, 0, 150);
color: white;
}
button[type="submit"]:hover {
cursor: url(Images/pagani-cursor.png) 55 55, auto;
background-color: green;
color: white;
transition: .5s;
}
/*Car CSS code - Main content of page*/
.cars {
display: flex;
flex-direction: column;
}
.car-name {
margin-top: 0px;
}
.car-stats {
margin-top: 0px;
margin-bottom: 5px;
}
.car-display {
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
padding: 20px;
border: 2px solid black;
border-radius: 40px;
margin-top: 20px;
margin-bottom: 20px;
}
.car {
width: 300px;
border-radius: 40px;
border: 2px solid black;
}
/*Footer CSS code*/
footer {
background-color: rgb(70, 70, 70);
height: 75px;
width: 100%;
position: absolute;
border: 2px solid black;
display: flex;
justify-content: center;
}
.footer-text {
color: white;
margin-top: 0;
font-family: 'Merriweather', serif;
}
.social-icons {
display: flex;
}
.social-icons a img {
max-width: 26px;
height: auto;
margin: 2px 5px;
}
/*Code for larger screens*/
#media screen and (min-width: 800px) {
.cars {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
padding: 20px;
}
}
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Venny's Cars</title>
<!-- <link href="main.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght#300&display=swap" rel="stylesheet">-->
</head>
<body>
<!--Below is the logo and title for the website-->
<header class="header">
<img src="Images/VennyDolphin.jpg" alt="Venny with dolphin" class="logo">
<div class="under-logo">
<img src="Images/lambo-logo-reverse.png" alt="outline of car" class="lambo-logo">
<h1 class="title">Venny's Cars</h1>
<img src="Images/lambo-logo.png" alt="reverse outline" class="lambo-logo">
</div>
</header>
<!--Below is the Navigation Bar-->
<nav class="navbar">
<div class="nav-links">Link</div>
<div class="nav-links">2nd Link</div>
<div class="nav-links">3rd Link</div>
</nav>
<!--Here is the signup form-->
<main>
<form class="signup-form" action="newsletter.html" method="POST">
<h1 class="signup-title">Sign Up for our Newsletter!</h1>
<fieldset class="name-email-input">
<div>
<label>First Name:</label>
<input type="text" id="firstname" name="firstname" placeholder="John" required>
</div>
<div>
<label>Email:</label>
<input type="email" id="email" name="email" placeholder="John#123.com" required>
</div>
<!--Signup Button-->
<div class="button">
<button type="submit" id="button">Sign Up!</button>
</div>
</fieldset>
</form>
<!--Below is our section for the cars-->
<div class="cars">
<!--Porsche 911 GT2 RS-->
<div class="car-display">
<h1 class="car-name">Porsche 911 GT2 RS</h1>
<img src="Images\gt2rs.jpg" class="car gt2rs" alt="Porshe 911 GT2 RS">
<ul>
<h2 class="car-stats">Car Stats</h2>
<li>Engine: 3.8-liter Twin-Turbo Flat 6</li>
<li>HP: 690hp # 7000rpm</li>
<li>Torque: 553 lb-ft # 2500rpm</li>
<li>Price: $293,200</li>
</ul>
<iframe width="560" height="315" src="https://www.youtube.com/embed/PwAhAFyMwk8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Koenigsegg One:1-->
<div class="car-display">
<h1 class="car-name">Koenigsegg One:1</h1>
<img src="Images/k1.jpg" class="car k1" alt="Koenigsegg One:1">
<ul>
<h2 class="car-stats">Car Stats</h2>
<li>Engine: 5.0-liter Twin-Turbo V8</li>
<li>HP: 1341hp # 7500rpm</li>
<li>Torque: 1010 lb-ft # 6000rpm</li>
<li>Price: $2,850,000</li>
</ul>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7X1z-1xwquk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Porsche 918 Spyder-->
<div class="car-display">
<h1 class="car-name">Porsche 918 Spyder</h1>
<img src="Images/918.jpg" class="car 918" alt="Porshe 918 Spyder">
<ul>
<h2 class="car-stats">Car Stats</h2>
<li>Engine: 4.6-liter V8 Hybrid</li>
<li>HP: 887hp # 8600rpm</li>
<li>Torque: 944 lb-ft # 5000rpm</li>
<li>Price: $845,000</li>
</ul>
<iframe width="560" height="315" src="https://www.youtube.com/embed/nSqzp3kdAm4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</main>
<!--Below is the footer-->
<footer>
<h2 class="footer-text">Follow me for new additions!</h2>
<div class="social-icons">
<img src="http://www.msskincarebeautysalon.com/images/facebook-button-blue.png" alt="facebook">
<img src="Images/insta.png" alt="insta">
</div>
</footer>
<script src="script.js"></script>
<!--Link to Javascript-->
<script src="action.js"></script>
</body>
</html>
I want to use horizontal scrolling for video testimonials in a single row in a responsive website but having problem.Container class width is more than col-12 and that is is leaves space and shows horizontal scroll on page, when i add more videos , space increases and i also used overflow property for the same. i use sass for this pattern.
it leaves horizontal space on page
.aspx file
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="pn-Product_Wrapper">
<div id="pnProduct" class="pn-Product">
<div id="pnProductContents" class="pn-Product_Contents">
<div class="pn-Product_Link" aria-selected="true">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.css file
.pn-Product_Wrapper
{
position: relative;
padding: 0 11px;
box-sizing: border-box;
}
.pn-Product {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
position: relative;
font-size: 0;
}
.pn-Product_Contents {
float: left;
-webkit-transition: -webkit-transform .2s ease-in-out;
transition: -webkit-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}
.pn-Product_Link {
text-decoration: none;
color: #888;
font-size: 1.2rem;
font-family: -apple-system, sans-serif;
display: -webkit-inline-box;
display: inline-flex;
-webkit-box-align: center;
align-items: center;
min-height: 44px;
border: 1px solid transparent;
padding: 0 11px;
}
you can refer my code pen https://codepen.io/jishnuvp/pen/povGrGq
$('.owl-carousel').owlCarousel({
loop: true,
margin: 25,
nav: true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
autoplay: true,
autoplayHoverPause: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
.carousel-wrap {
margin: 90px auto;
padding: 0 5%;
width: 80%;
position: relative;
}
/* fix blank or flashing items on carousel */
.owl-carousel .item {
position: relative;
z-index: 100;
-webkit-backface-visibility: hidden;
}
.owl-carousel .item iframe{
width:100%;
}
/* end fix */
.owl-nav > div {
margin-top: -26px;
position: absolute;
top: 50%;
color: #cdcbcd;
}
.owl-nav i {
font-size: 52px;
}
.owl-nav .owl-prev {
left: -30px;
}
.owl-nav .owl-next {
right: -30px;
}
<link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css">
<div class="carousel-wrap">
<div class="owl-carousel">
<div class="item"><iframe src="https://www.youtube.com/embed/meOPUzdrs-Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="item"><iframe src="https://www.youtube.com/embed/meOPUzdrs-Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="item"><iframe src="https://www.youtube.com/embed/meOPUzdrs-Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="item"><iframe src="https://www.youtube.com/embed/meOPUzdrs-Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="item"><iframe src="https://www.youtube.com/embed/meOPUzdrs-Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="item"><iframe src="https://www.youtube.com/embed/meOPUzdrs-Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/owl.carousel.min.js"></script>
<script src="https://use.fontawesome.com/826a7e3dce.js"></script>
You could use flexbox instead of float replacing:
.pn-Product_Contents {
float: left;
by this:
.pn-Product_Contents {
display: flex;
flex-direction: column;
For more info: https://www.w3schools.com/css/css3_flexbox.asp
I have a div with class 'card1' and 'card2' inside which there is a iframe used. I applied hover to 'card1' and 'card2' so that it go up when I hover but the issue is when I am hovering it's fluctuating.
You will easily understand it here : https://codesandbox.io/s/scapic-hovering-cards-34xif
I tried doing pointer-events:none to the class 'video' which is inside iframe and it works fine but as pointer-event:none works, it's disabling the events.
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
}
.card1 {
border: 1px solid #cccccc;
position: relative;
width: 300px;
background-color: rgba(242, 242, 242, 0.5);
border-radius: 10px;
height: 200px;
z-index: 1;
margin-top: 60px;
top: 0;
transition: top ease 0.5s;
transform: perspective(260px) rotateY(-28deg);
}
.card1:hover {
top: -10px;
}
.card2 {
border: 1px solid #cccccc;
position: relative;
transition: top ease 0.5s;
width: 300px;
background-color: rgba(242, 242, 242, 0.5);
border-radius: 10px;
top: 0;
height: 200px;
transform: perspective(290px) rotateY(20deg);
}
.card2:hover {
top: -10px;
}
.video {
margin-top: 30px;
border-radius: 0 0 10px 10px;
}
<div class=container>
<div class="card1">
<div>
<iframe class="video" width="300" height="170"
src="https://www.youtube.com/embed/6oFvqLfRnsU" frameborder="0" a
llow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-
picture" allowfullscreen></iframe>
</div>
</div>
<div class="card2">
<div>
<iframe class="video" width="300" height="170"
src="https://www.youtube.com/embed/R84JU3B0jqo" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-
picture" allowfullscreen></iframe>
</div>
</div>
</div>
I want the card to stay stable when I hover and shouldn't fluctuate.
It will be a great help if anyone can help me out with this issue.
Please check this out.
I placed the card1 and card2 in two separate containers card1-container and card2-container and added the hover effects on them to get affected on card1 and card2
Also I removed the direct hover effects on card1 and card2
This seems to fix the issue for me. But you can do more research improve this.
Also, Check this question's answer
body {
font-family: sans-serif;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
}
.card1-container:hover>.card1 {
top: -10px;
}
.card2-container:hover>.card2 {
top: -10px;
}
.card1 {
border: 1px solid #cccccc;
position: relative;
width: 300px;
background-color: rgba(242, 242, 242, 0.5);
border-radius: 10px;
height: 200px;
z-index: 1;
margin-top: 60px;
top: 0;
transition: all ease 0.5s;
transform: perspective(260px) rotateY(-28deg);
}
.card2 {
border: 1px solid #cccccc;
position: relative;
transition: all ease 0.5s;
width: 300px;
background-color: rgba(242, 242, 242, 0.5);
border-radius: 10px;
top: 0;
height: 200px;
transform: perspective(290px) rotateY(20deg);
}
.video {
margin-top: 30px;
border-radius: 0 0 10px 10px;
}
<div class="container">
<div class="card1-container">
<div class="card1">
<div>
<iframe class="video" width="300" height="170" src="https://www.youtube.com/embed/6oFvqLfRnsU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- <iframe class="video" width="300" height="170" src="https://www.youtube.com/embed/vFp2XjmoE3o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
</div>
</div>
</div>
<div class="card2-container">
<div class="card2">
<div>
<!-- <iframe class="video" width="300" height="170" src="https://www.youtube.com/embed/mMHEqjsbR7E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-->
<iframe class="video" width="300" height="170" src="https://www.youtube.com/embed/R84JU3B0jqo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
I've tried to solve your problem with a workaround.
What have I done? I've added two container box(one for card) between container and card. Now the event of the selector :hover is activated when your cursor is on the element div with the class trick-container.
How this solve the problem? When your cursor is on the element with the class trick-container the content inside the element is moved upper but not the element itself, in this way the selector event :hover isn't lost and the content isn't putted down.
HTML:
<div class=container>
<div class="trick-container">
<div class="card1-container">
<div class="card1">
<iframe class="video" width="300" height="170" src="https://www.youtube.com/embed/6oFvqLfRnsU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- <iframe class="video" width="300" height="170" src="https://www.youtube.com/embed/vFp2XjmoE3o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
</div>
</div>
</div>
<div class="trick-container2">
<div class="card2-container">
<div class="card2">
<!-- <iframe class="video" width="300" height="170" src="https://www.youtube.com/embed/mMHEqjsbR7E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-->
<iframe class="video" width="300" height="170" src="https://www.youtube.com/embed/R84JU3B0jqo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
CSS:
.trick-container {
padding-top: 60px;
transform: perspective(260px) rotateY(-28deg);
}
.trick-container2 {
height: 205px;
transform: perspective(290px) rotateY(20deg);
}
.card1-container {
border: 1px solid #cccccc;
position: relative;
width: 300px;
background-color: rgba(242, 242, 242, 0.5);
border-radius: 10px;
height: 200px;
z-index: 1;
top: 0;
transition: top 0.5s ease-in;
}
.trick-container:hover > .card1-container {
top: -10px;
}
.card2-container {
border: 1px solid #cccccc;
position: relative;
width: 300px;
background-color: rgba(242, 242, 242, 0.5);
border-radius: 10px;
height: 200px;
top: 0;
transition: top 0.5s ease-in;
}
.trick-container2:hover > .card2-container {
top: -10px;
}
You can check your reworked code here:
https://codesandbox.io/s/6zilz
Let me know if this solve your problem and/or if you've solved the problem in another way!
Also ask me for further explanation if needed.