Responsive Text Issue - javascript

I have the following code:
body{
width:100%;
font-family:sans-serif;
background: transparent;
}
.testimonials{
margin:0;
display:grid;
grid-template-columns: repeat(auto-fit,minmax(350px, 1fr));
grid-gap:20px;
}
.testimonials .card{
position:relative;
width:350px;
margin:0 auto;
background:#333;
padding:20px;
box-sizing: border-box;
text-align:center;
box-shadow: 10px 8px 20px rgba(0,0,0,.5);
overflow: hidden;
}
.testimonials .card .layer{
position: absolute;
top: calc(100% - 3px);
width:100%;
height:100%;
left:0;
background:linear-gradient(#034e70, #390375);
z-index:1;
transition:0.5s;
}
.testimonials .card:hover .layer{
top:0;
}
.testimonials .card .content{
position:relative;
z-index:2;
}
.testimonials .card .content p{
font-size:18px;
line-height:24px;
color:#FFF;
}
#media all and (max-width: 500px) {
.testimonials .card .content p{
width: 100%;
}
}
.testimonials .card .content .image{
width:100px;
height:100px;
margin: 0 auto;
border-radius:50%;
overflow:hidden;
margin-bottom: 16px;
box-shadow: 0 10px 20px rgba{0,0,0, .2};
}
.testimonials .card .content .details h2{
font-size:15px;
color:#fff;
}
.testimonials .card .content .details h2 span{
color:#03a9f4;
font-size:12px;
transition:0.5s;
}
.testimonials .card:hover .content .details h2 span{
color:#fff;
}
<section id="References">
<div class="section-title">
<h2>References</h2>
</div>
<div class="testimonials">
<!-- CARD 1 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 1 end-->
<!-- CARD 2 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 2 end-->
<!-- CARD 3 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 3 end-->
</div>
</section>
I have the above code embedded in a website and so when I view the website on a smaller screen, I am getting this output:
The white text, image, and blue text are not responsive. However, the card is. Its just these three things, and I tried adding media queries to make them responsive but it did not work for some reason, and the output was the exact same as above.
Expected Output
When I inspect it and view it on 414 width, I am getting the above expected output which is what I want. However, below 414 width, I am getting the output as shown in the very first picture. How would I fix this? Any suggestions?


Try updating the grid-template-columns on media query for responsive design/mobile screen.
body {
width: 100%;
font-family: sans-serif;
background: transparent;
margin: 0;
}
.testimonials {
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap: 20px;
padding: 20px;
}
.testimonials .card {
position: relative;
max-width: 350px;
margin: 0 auto;
background: #333;
padding: 20px;
box-sizing: border-box;
text-align: center;
box-shadow: 10px 8px 20px rgba(0, 0, 0, .5);
overflow: hidden;
}
.testimonials .card .layer {
position: absolute;
top: calc(100% - 3px);
width: 100%;
height: 100%;
left: 0;
background: linear-gradient(#034e70, #390375);
z-index: 1;
transition: 0.5s;
}
.testimonials .card:hover .layer {
top: 0;
}
.testimonials .card .content {
position: relative;
z-index: 2;
}
.testimonials .card .content p {
font-size: 18px;
line-height: 24px;
color: #FFF;
}
.testimonials .card .content .image {
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
margin-bottom: 16px;
box-shadow: 0 10px 20px rgba(0,0,0,.2);
}
.testimonials .card .content .details h2 {
font-size: 15px;
color: #fff;
}
.testimonials .card .content .details h2 span {
color: #03a9f4;
font-size: 12px;
transition: 0.5s;
}
.testimonials .card:hover .content .details h2 span {
color: #fff;
}
#media all and (max-width: 500px) {
.testimonials {
grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
}
.testimonials .card .content p {
width: 100%;
}
}
<section id="References">
<div class="section-title">
<h2>References</h2>
</div>
<div class="testimonials">
<!-- CARD 1 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim
egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 1 end-->
<!-- CARD 2 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim
egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 2 end-->
<!-- CARD 3 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim
egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 3 end-->
</div>
</section>


It's because you've set a fixed width of 350px for your element. When you make the window any smaller than ~370px wide, the fixed width prevents the element from getting any smaller. Try using relative sizes like % instead.

Related

HTML CSS JS formatting of display: none

Initially, my id="Gabel" display was shown on my page with the correct format but when input display: none; my formatting was distorted. Is there anything wrong with my code? I want to show display id="Gabel" when I click the image on the main page. Here are some of the codes. My problem lies in the formatting of my card with an id of Gabel. Thank you
#Gabel {
background-color: #fff;
position: relative;
display: flex;
border-radius: 20px;
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.356);
padding: 0;
top: 300px;
/* display: none; */
width: 80%;
}
.container_Gabel img {
width: auto;
height: 100%;
border-radius: 5px 0 0 5px;
}
.container_Gabel .btn {
position: absolute;
bottom: -20px;
right: -20px;
border: none;
outline: none;
display: flex;
align-items: center;
background-color: #fc9400;
color: #fff;
padding: 22px 45px;
font-size: 1rem;
text-transform: uppercase;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.294);
}
.container__text {
padding: 40px 40px 0;
}
.container__text h1 {
color: #351897;
font-weight: 400;
}
.container__text p {
font-size: 0.9rem;
}
.container__text .container__text__timing {
display: flex;
margin: 20px 0 10px;
}
.container__text .container__text__timing .container__text__timing_time {
margin-right: 40px;
}
.container__text .container__text__timing h2 {
font-size: 1rem;
font-weight: 400;
margin-top: 20px;
margin-right: 30px;
}
.second_half {
margin-left: 20px;
}
.container__text .container__text__timing p {
color: #351897;
font-weight: bold;
font-size: 1.2rem;
}
.title-container {
background: yellow;
display: flex;
justify-content: center;
align-items: center;
writing-mode: tb-rl;
margin-left: 5px;
margin-right: 5px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.title-container span {
transform: rotate(180deg);
display: flex;
text-align: center;
min-height: 10em;
vertical-align: middle;
line-height: 2em;
justify-content: center;
width: 2em;
}
.vl {
border-left: 4px solid black;
height: 100px;
}
hr {
border: 0;
height: 1px;
width: 100%;
position: relative;
margin-top: 0;
}
<!DOCTYPE html>
<html>
<head>
<script>
function clearBox(elementID) {
document.getElementById(elementID).innerHTML = "";
var x = document.getElementById("Gabel");
if (x.style.display === "none") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</head>
<body>
<div><button class="button button1">Main Menu</button></div>
<div id="image">
<div class="row" id="container-item">
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>GABEL LOFFEL</h3>
</div>
<div class="card-img-wrapper ">
<button class="button2" onclick="clearBox('container-item')">
<img src="assets\image_1.jpg" alt="">
</button>
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>Get out your <br> Lederhosen!</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container_Gabel" id="Gabel">
<div class="title-container"><span>
<h2>GABEL LOFFEL</h2>
</span></div>
<div>
<img src="assets\swiss.jpg" alt="Pancake" />
</div>
<div class="container__text">
<h1>Gabel Loffell</h1>
<div class="container__text__timing">
<div class="container__text__timing_time">
<h2>
235 GLENDALE AVE.<br>
MERIDIAN CITY<br>
T: 490 49 4000<br>
W: GANDG.RES
</h2>
</div>
<div class="container__text__timing_time vl"></div>
<div class="container__text__timing_time">
<h2 class="second_half">
CATEGORY: SWISS<br>
OPEN: 10AM TO 10PM<br>
PRICE: $$$
</h2>
</div>
</div>
<hr>
<div class="body_container">
<div class="body_card">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor sodales purus, id
accumsan est sodales sed. Aenean tempus laoreet molestie. Ut leo ipsum, euismod a ante vitae,
dapibus porttitor orci. Suspendisse nec porta urna. Proin neque neque, imperdiet laoreet turpis
a, tincidunt convallis neque. Nunc sed nisi tristique, auctor sapien sit amet, rutrum massa. Nam
non enim placerat, egestas risus id, tincidunt nisl. Quisque vestibulum dolor non pharetra
fermentum. Sed vestibulum sapien dui, ut mollis augue luctus ac. Sed magna ex, interdum sit amet
velit ac, elementum scelerisque tortor. Cras eget maximus diam.
<br><br>Aliquam ultrices varius lorem sed elementum. Aenean rutrum efficitur suscipit. In quis
ligula nulla. Aliquam dictum ex ut metus vulputate feugiat. Phasellus sagittis consequat dolor,
id molestie ante tempus at. Sed ullamcorper velit id nulla mollis cursus. Vivamus nisl dolor,
posuere vehicula congue vel, ullamcorper ac nulla. Suspendisse iaculis enim tellus, ut congue
turpis dapibus ac. In congue nulla id gravida pellentesque. Donec rutrum urna nec metus
tristique, a commodo dui porta. Etiam semper, lacus non eleifend imperdiet, ipsum diam vulputate
eros, non laoreet ligula nibh vel lorem. Ut eu volutpat turpis. Nulla lobortis, velit ut varius
sollicitudin, nibh elit ornare diam, vel viverra odio orci a dui. Donec vel nulla vitae ex
imperdiet congue ut id metus. Sed sit amet condimentum eros.
</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>

Possibly try toggling opacity instead of display
#Gabel {
background-color: #fff;
position: relative;
display: flex;
border-radius: 20px;
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.356);
padding: 0;
top: 300px;
opacity: 0;
width: 80%;
}
.container_Gabel img {
width: auto;
height: 100%;
border-radius: 5px 0 0 5px;
}
.container_Gabel .btn {
position: absolute;
bottom: -20px;
right: -20px;
border: none;
outline: none;
display: flex;
align-items: center;
background-color: #fc9400;
color: #fff;
padding: 22px 45px;
font-size: 1rem;
text-transform: uppercase;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.294);
}
.container__text {
padding: 40px 40px 0;
}
.container__text h1 {
color: #351897;
font-weight: 400;
}
.container__text p {
font-size: 0.9rem;
}
.container__text .container__text__timing {
display: flex;
margin: 20px 0 10px;
}
.container__text .container__text__timing .container__text__timing_time {
margin-right: 40px;
}
.container__text .container__text__timing h2 {
font-size: 1rem;
font-weight: 400;
margin-top: 20px;
margin-right: 30px;
}
.second_half {
margin-left: 20px;
}
.container__text .container__text__timing p {
color: #351897;
font-weight: bold;
font-size: 1.2rem;
}
.title-container {
background: yellow;
display: flex;
justify-content: center;
align-items: center;
writing-mode: tb-rl;
margin-left: 5px;
margin-right: 5px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.title-container span {
transform: rotate(180deg);
display: flex;
text-align: center;
min-height: 10em;
vertical-align: middle;
line-height: 2em;
justify-content: center;
width: 2em;
}
.vl {
border-left: 4px solid black;
height: 100px;
}
hr {
border: 0;
height: 1px;
width: 100%;
position: relative;
margin-top: 0;
}
<script>
function clearBox(elementID) {
document.getElementById(elementID).innerHTML = "";
var x = document.getElementById("Gabel");
if (x.style.opacity === "0") {
x.style.opacity = "0";
} else {
x.style.opacity = "1";
}
}
</script>
<body>
<div><button class="button button1">Main Menu</button></div>
<div id="image">
<div class="row" id="container-item">
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>GABEL LOFFEL</h3>
</div>
<div class="card-img-wrapper ">
<button class="button2" onclick="clearBox('container-item')"><img src="assets\image_1.jpg"
alt=""></button>
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>Get out your <br> Lederhosen!</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container_Gabel" id="Gabel">
<div class="title-container"><span>
<h2>GABEL LOFFEL</h2>
</span></div>
<div>
<img src="assets\swiss.jpg" alt="Pancake" />
</div>
<div class="container__text">
<h1>Gabel Loffell</h1>
<div class="container__text__timing">
<div class="container__text__timing_time">
<h2>
235 GLENDALE AVE.<br>
MERIDIAN CITY<br>
T: 490 49 4000<br>
W: GANDG.RES
</h2>
</div>
<div class="container__text__timing_time vl"></div>
<div class="container__text__timing_time">
<h2 class="second_half">
CATEGORY: SWISS<br>
OPEN: 10AM TO 10PM<br>
PRICE: $$$
</h2>
</div>
</div>
<hr>
<div class="body_container">
<div class="body_card">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor sodales purus, id
accumsan est sodales sed. Aenean tempus laoreet molestie. Ut leo ipsum, euismod a ante vitae,
dapibus porttitor orci. Suspendisse nec porta urna. Proin neque neque, imperdiet laoreet turpis
a, tincidunt convallis neque. Nunc sed nisi tristique, auctor sapien sit amet, rutrum massa. Nam
non enim placerat, egestas risus id, tincidunt nisl. Quisque vestibulum dolor non pharetra
fermentum. Sed vestibulum sapien dui, ut mollis augue luctus ac. Sed magna ex, interdum sit amet
velit ac, elementum scelerisque tortor. Cras eget maximus diam.
<br><br>Aliquam ultrices varius lorem sed elementum. Aenean rutrum efficitur suscipit. In quis
ligula nulla. Aliquam dictum ex ut metus vulputate feugiat. Phasellus sagittis consequat dolor,
id molestie ante tempus at. Sed ullamcorper velit id nulla mollis cursus. Vivamus nisl dolor,
posuere vehicula congue vel, ullamcorper ac nulla. Suspendisse iaculis enim tellus, ut congue
turpis dapibus ac. In congue nulla id gravida pellentesque. Donec rutrum urna nec metus
tristique, a commodo dui porta. Etiam semper, lacus non eleifend imperdiet, ipsum diam vulputate
eros, non laoreet ligula nibh vel lorem. Ut eu volutpat turpis. Nulla lobortis, velit ut varius
sollicitudin, nibh elit ornare diam, vel viverra odio orci a dui. Donec vel nulla vitae ex
imperdiet congue ut id metus. Sed sit amet condimentum eros.
</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>

Try using visibility property, which leaves an element in normal document flow, display: none essentially removes the element completely from the document.
Here, if you need more detail.

Try using
visibility:hidden;
and
visibility: visible;
to hide and show the element

navigation buttons shift when responsive menu is clicked

Below is a navigation bar with a logo (home button) to the left and a call button and menu dropdown button to the right. Once the menu button is clicked and the dropdown menu is opened the call button moves to the right on top of the menu button and the entire navigation bar turns into just 1 button. What is causing this shift?
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {
position: relative;
height: 100vh;
margin: 0px;
background-color: #e6e6e6e6;
color: #444;
font: .9em Arial, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #185b9b;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #2672b2;
color: white;
}
.active {
background-color: #185b9b;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.main {
padding: 16px;
margin-top: 30px;
height: 100%;
}
.wrapper {
box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
background-color: white;
}
#one {
float: left;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
min-height: 130px;
width: 200px;
height: 100%;
}
#one img {
max-height: 25px;
max-width: 160px;
}
#two {
overflow: hidden;
margin: 10px;
min-height: 130px;
}
#media screen and (max-width: 910px) {
#one {
float: none;
margin-right: 10;
width: auto;
border: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="topnav" id="myTopnav">
Logo Name
Contact Us
Download
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<a href="tel:800-922-0204" class="icon">
<i class="fas fa-phone"></i>
</a>
</div>
<div class="main">
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
</div>
</body>
</html>

The bars icon and phone icon are both using the same class, so they are both being assigned the same positioning properties. Make them separate classes so they can keep their unique positions instead of overlapping.
body {
position: relative;
height: 100vh;
margin: 0px;
background-color: #e6e6e6e6;
color: #444;
font: .9em Arial, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #185b9b;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #2672b2;
color: white;
}
.active {
background-color: #185b9b;
color: white;
}
.topnav .iconBars, .topnav .iconPhone {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.iconBars, .topnav a.iconPhone {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .iconBars {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive .iconPhone {
position: absolute;
right: 47px;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.main {
padding: 16px;
margin-top: 30px;
height: 100%;
}
.wrapper {
box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
background-color: white;
}
#one {
float: left;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
min-height: 130px;
width: 200px;
height: 100%;
}
#one img {
max-height: 25px;
max-width: 160px;
}
#two {
overflow: hidden;
margin: 10px;
min-height: 130px;
}
#media screen and (max-width: 910px) {
#one {
float: none;
margin-right: 10;
width: auto;
border: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="topnav" id="myTopnav">
Logo Name
Contact Us
Download
<a href="javascript:void(0);" class="iconBars" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<a href="tel:800-922-0204" class="iconPhone">
<i class="fas fa-phone"></i>
</a>
</div>
<div class="main">
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>

I see that you have a media query with position: absolute
#media screen and (max-width: 600px) {
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
This solution is without position: absolute
I removed the above from css, i give in .topnav
.topnav {
display: flex;
justify-content: space-between;
}
And put both your menu links and icons inside a div. Take a look in the code above.
I hope it helps you.
body {
position: relative;
height: 100vh;
margin: 0px;
background-color: #e6e6e6e6;
color: #444;
font: .9em Arial, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #185b9b;
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-between;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #2672b2;
color: white;
}
.active {
background-color: #185b9b;
color: white;
}
.topnav .icon {
display: none;
}
.menu-icons {
display: flex;
height:48px;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.main {
padding: 16px;
margin-top: 30px;
height: 100%;
}
.wrapper {
box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
background-color: white;
}
#one {
float: left;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
min-height: 130px;
width: 200px;
height: 100%;
}
#one img {
max-height: 25px;
max-width: 160px;
}
#two {
overflow: hidden;
margin: 10px;
min-height: 130px;
}
#media screen and (max-width: 910px) {
#one {
float: none;
margin-right: 10;
width: auto;
border: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="topnav" id="myTopnav">
<div>
Logo Name
Contact Us
Download
</div>
<div class="menu-icons">
<a href="tel:800-922-0204" class="icon">
<i class="fas fa-phone"></i>
</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
<div class="main">
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
`

How to hide a div while scrolling using pure JS?

so I have a div that covers my whole web page. Beneath it I also have a set of divs. I want to be able to hide my div while scrolling down so my other divs beneath it can start appearing.
the div for now is colored in black with an absolute position. I want this div to be the first page the user sees and then it starts hiding when the user scrolls down and the other divs beneath it to appear.
Here is my html:
body {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">Start Learning!</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
how can I do that with pure JS or CSS?

I'd suggest applying a scroll listener putting a CSS class on your overlay div that causes a fade transition:
document.addEventListener('scroll', () => { toHide.classList.add('hiddenByScroll')});
body {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity .3s ease-in-out;
opacity: 1;
}
#toHide.hiddenByScroll {
opacity: 0;
pointer-events: none;
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">Start Learning!</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
Make sure to also apply pointer-events: none;, otherwise the element will be invisible, but cannot be "clicked through" as it is still there.

You can achieve what you want by modifying the opacity property of the div once the user begins to scroll. Also, here's a working example and a reference for onscroll :)
// listen for a scroll event in the window containing the DOM
window.onscroll = ()=>{
// grab the div we want to hide
let toHide = document.getElementById('toHide');
// fade the div above out by setting its opacity to 0
toHide.style.opacity = 0;
}
html {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity 500ms ease-in-out;
}
<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
</body>
</html>
On the other hand, since you mentioned you want the div to be the first thing your users see when your page loads, you can do something like this so it'll reappear when the user scrolls back up to the top again:
// listen for a scroll event in the window containing the DOM
window.onscroll = ()=>{
// grab the div we want to hide
let toHide = document.getElementById('toHide');
// fade the div above out by setting its opacity to 0
// if the user scrolled down, scrollY will be greater than 0
if(window.scrollY > 0){
toHide.classList.add('hide');
}
else{
toHide.classList.remove('hide');
}
}
html {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity 500ms ease-in-out;
}
.hide {
opacity: 0;
}
<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
</body>
</html>
Here's a working example for the snippet above and a reference to scrollY.
The second example also makes use of a css class (.hide) instead of modifying the involved property using solely pure JS. The class is dynamically added and removed using the addClass and removeClass methods of the toHide div'sclassList property respectively.

How to position a div above another div without cutting the top div off

I'm struggling with trying to achieve the attached layout. I am trying to get my pop-up card to sit above the background div but the content is being cut off where the background div ends.
Your help is very much appreciated :) About Me Desired Layout
/*About Me Section*/
.about-me {
position: relative;
padding-top: 10%;
height: 500px;
margin-top: -7%;
z-index: -1;
background-color: #E5460E;
clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 -100%);
}
.about-card {
position: absolute;
top: 20%;
left: 0;
margin: 0auto;
z-index: 1000000;
width: 80%;
height: 500px;
background-color: #fff;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.22);
}
<body>
<div class="about-me">
<div class="about-card">
<div class="story">
<div class="story-photo">
<img class="story-me" src="About-Me.png">
</div>
<h3 class="story-title">My Story</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget lobortis orci. Vivamus iaculis lobortis dolor. Suspendisse ultricies nulla et ex aliquam laoreet. Donec nunc risus, posuere interdum efficitur id, dignissim eget enim. Duis bibendum ipsum eu malesuada porta.
<br>
Vivamus non neque orci. Aenean varius dolor posuere est fermentum porttitor. Maecenas id porttitor felis. Morbi facilisis, dui in semper consequat, nulla dolor semper massa, ac vehicula felis tortor nec eros. Sed quis ante eu diam efficitur laoreet.
</p>
</div>
</div>
</body>

This is because your content div (.about-card) is within the .about-me div and is getting cut off by the clip-path in your CSS. Make a separate div within .about-me called .about-me-background and give it the styling instead:
/*About Me Section*/
.about-me-background {
position: relative;
padding-top: 10%;
height: 500px;
margin-top: -7%;
z-index: -1;
background-color: #E5460E;
clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 -100%);
}
.about-card {
position: absolute;
top: 20%;
left: 0;
margin: 0auto;
z-index: 1000000;
width: 80%;
height: 500px;
background-color: #fff;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.22);
}
<body>
<div class="about-me">
<div class="about-me-background">
</div>
<div class="about-card">
<div class="story">
<div class="story-photo">
<img class="story-me" src="About-Me.png">
</div>
<h3 class="story-title">My Story</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget lobortis orci. Vivamus iaculis lobortis dolor. Suspendisse ultricies nulla et ex aliquam laoreet. Donec nunc risus, posuere interdum efficitur id, dignissim eget enim. Duis bibendum ipsum eu malesuada porta.
<br>
Vivamus non neque orci. Aenean varius dolor posuere est fermentum porttitor. Maecenas id porttitor felis. Morbi facilisis, dui in semper consequat, nulla dolor semper massa, ac vehicula felis tortor nec eros. Sed quis ante eu diam efficitur laoreet.
</p>
</div>
</div>
</body>
Now you will see that .about-card extends below the red background.

Dude! Try to make it simple by using the structure which follows header, footer, sections, etc. and develop your code.
try this snippet and hope this works well for you!.
body{
margin:auto;
}
header{
height: 70%;
width: 100%;
background:red;
}
footer{
height: 30%;
width: 100%;
position:absolute;
background:#fff;
}
#insidebox{ /*align your css based on your requirement*/
position: absolute;
width: 300px;
height: 200px;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px; /* adjust accordingly */
background: red;
border:1px solid;
background:white;
}
.rotateCSS{
/*css goes here for rorating the text*/
}
<body>
<header>
<section id="rotateCSS">
<div> About Me </div>
</section>
</header>
<footer>
<section>
</section>
</footer>
<section id="insidebox">
<div>
hello for box in center
</div>
</section>
</body>

try this, I put the HTML as ...
<div class="about">
<p>ABOUT ME</p>
</div>
<div class="about__content">
...
</div>
then use position: absolute to lay over
Hope to be helpful to you, bro
-
just a demo: CodePen

make div appear over another div on scroll

Firstly I'm sorry, there's probably quite an easy way to do this but I'm an amateur with javascript, etc. which I expect you need. Here's what i want to do:
I have a basic 'parallax' website (something along the lines of this) but I'd like to add a footer which covers half of the bottom slide when you scroll down to it, with the content in the bottom slide staying put.
As in at the moment, the content in the fifth slide moves when you scroll down to the footer, but I want it to stop at the fifth slide, with the footer sliding over the top.
Any help will be greatly appreciated!
Sorry: here's the Lorem ipsumed code:
//I have no idea what javascript i should be using.
* {
margin: 0;
padding: 0;
min-height: 15px;
}
.page {
height: 100vh;
position: relative;
}
.page-title {
font-family: 'Quattrocento Sans';
font-size: 2.5em;
transform: translateY(100%);
margin-left: 50px;
margin-right: 50px;
}
.page-sub {
font-family: 'Coming Soon';
font-size: 1.5em;
text-align: center;
margin: 50px;
}
.page-para {
font-family: 'Quattrocento Sans';
font-size: 1.2em;
line-height: 1.5;
margin-top: 50px;
margin-bottom: 50px;
margin-right: 50px;
margin-left: 50%;
position: relative;
}
.page-link {
text-decoration: none;
color: #F0C808;
}
.page-link:hover {
color: #F0C808;
font-weight: bold;
}
.link-box {
color: #F0C808;
background-color: #07A0C3;
border: 1px solid #07A0C3;
font-family: 'Coming Soon';
font-size: 1.5em;
text-align: center;
height: 3em;
width: 8em;
line-height: 3em;
bottom: 100px;
right: 150px;
position: absolute;
}
#page-one {
background: url('img/page-one.jpg') no-repeat fixed;
background-size: 100%;
}
.main-title {
font-family: 'Quattrocento Sans';
font-size: 3em;
text-align: center;
padding: auto;
align-items: center;
width: 35%;
margin-left: auto;
margin-right: auto;
position: relative;
top: 50%;
transform: translateY(-100%);
}
#page-two {
background: url(img/page-two.png) no-repeat;
background-size: 100%;
background-color: #E2E2E2;
}
#page-three {
background: url(img/page-three.jpg) no-repeat fixed;
background-size: 100%;
}
#page-four {
background: url(img/page-four.jpg) no-repeat;
background-size: 100%;
background-color: #E2E2E2;
}
#page-five {
background: url(img/page-five.jpg) no-repeat fixed;
background-size: 100%;
}
.page-five-para {
margin: 0;
}
.page-five-bold {
font-family: 'Coming Soon';
font-size: 1.2em;
margin: 0;
}
#footer {
background-color: #E2E2E2;
}
.foot {
margin: 0;
display: inline-block;
vertical-align: top;
width: 33%;
height: 50vh;
}
h5 {
font-family: 'Coming Soon';
font-size: 1.5em;
margin: 15px;
padding-left: 15px;
}
.right-foot-spacer {
height: 2.41em;
margin: 15px;
padding-left: 15px;
}
.foot-content {
font-family: 'Quattrocento Sans';
font-size: 1.2em;
margin: 20px;
}
.foot-list {
list-style: none;
}
.foot-link {
color: black;
text-decoration: none;
}
blockquote {
margin: 0px;
margin-bottom: 15px;
}
.right-footer p {
text-align: right;
}
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Quattrocento+Sans|Coming+Soon' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="page" id="page-one">
<h1 class="main-title">Title</h1>
</div>
<div class="page" id="page-two">
<h2 class="page-title">Page two title</h2>
<h4 class="page-sub">subtitle</h4>
<p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p>
</div>
<div class="page" id="page-three">
<h2 class="page-title">Page three title</h2>
<h4 class="page-sub">subtitle</h4>
<p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p>
<a href="http://www.google.com" class="page-link">
<div class="link-box">Link</div>
</a>
</div>
<div class="page" id="page-four">
<h2 class="page-title">Page title</h2>
<h4 class="page-sub">subtitle</h4>
<p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p>
<a href="http://www.bing.com" class="page-link">
<div class="link-box">Link</div>
</a>
</div>
<div class="page page-five" id="page-five">
<h2 class="page-title">Page title</h2>
<h4 class="page-sub">Lorem ipsum dolor</h4>
<div class="page-para">
<p class="page-five-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida.</p>
<h6 class="page-five-bold">Lorem ipsum dolor</h6>
<p class="page-five-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div id="footer">
<div class="foot left-footer">
<h5>Lorem Ipsum</h5>
<p class="foot-content email">someone#example.com</p>
</div>
<div class="foot center-footer">
<h5>Footer</h5>
<ul class="foot-content">
<li class="foot-list">Google
</li>
<li class="foot-list">Bing
</li>
<li class="foot-list">Yahoo
</li>
</ul>
</div>
<div class="foot right-footer">
<div class="right-foot-spacer"></div>
<div class="foot-content quote">
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
<p>-Lorem Ipsum</p>
</div>
</div>
</div>
</body>
</html>

If I've understood your question correctly, one way to achieve the effect you are looking for is by monitoring the getBoundingClientRect().top property of the final <div> and the getBoundingClientRect().bottom property of the penultimate <div>.
When the getBoundingClientRect().top property of the final <div> hits the top of the viewport, you can change the element's style rules to fix it in that position;
When the getBoundingClientRect().bottom property of the penultimate <div> comes back into view at the top of the viewport, you can unfix the final <div> so that it starts scrolling as normal again.
Example:
function fixPage5() {
var footer = document.getElementsByTagName('footer')[0];
var pages = document.getElementsByClassName('page');
if (pages[(pages.length - 1)].getBoundingClientRect().top < 1) {
pages[(pages.length - 1)].classList.add('fixed');
footer.style.marginTop = '424px';
}
if (pages[(pages.length - 2)].getBoundingClientRect().bottom > -1) {
footer.style.marginTop = '0';
pages[(pages.length - 1)].classList.remove('fixed');
}
}
window.addEventListener('scroll',fixPage5,false);
body {
margin: 0;
padding: 0;
}
.page {
position: relative;
width: 100%;
height: 400px;
padding: 12px;
font-size: 72px;
}
footer {
position: relative;
width: 100%;
z-index: 12;
height: 400px;
font-size: 72px;
color: rgb(255,255,255);
background-color: rgb(31,31,31);
}
.page:nth-of-type(odd) {
color: rgb(255,255,255);
background-color: rgb(127,127,127);
}
.fixed {
position: fixed;
top: 0;
left: 0;
z-index: -12;
}
<div class="page">Page One</div>
<div class="page">Page Two</div>
<div class="page">Page Three</div>
<div class="page">Page Four</div>
<div class="page">Page Five</div>
<footer>Footer</footer>

Categories

Resources