We Keep Coding

Alignment Fix in html/css

I have the following code:
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1 {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 20px;
overflow: hidden;
}
.square {
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-left: auto;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
#media screen and (max-width: 480px) {
.square {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
#media screen and (max-width: 480px) {
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
}
}
/* iframe css*/
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #050d18;
}
.resume .resume-item {
position: relative;
text-align: center;
}
.add {
padding: 0;
}
.iframe {
height: 1070px;
margin-left: auto;
margin-right: auto;
width: 80%;
}
#media all and (max-width: 500px) {
.embed-responsive {
height: auto;
}
.iframe {
height: 130vw;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
</div>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>
I want the corner of the blog card to be perfectly aligned under the corner of the iFrame. The first corner of the blog card should be right under the first corner of the iFrame.
Expected Output
Expected Output
How would I modify the CSS to have it output as the above picture? Adding margin-left: auto on square does not work. Any suggestions would greatly help! Thanks a lot!

My suggestion is to remove the grid and padding from .container1, align the iframe left, and set both left margins to 10%.
Since the iframe is width:80%, 10% on each side will center it. And the matching margin on the top element will align the left edges of the two elements.
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.square {
max-width: 460px;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-left: 10%;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
.iframe {
height: 1070px;
margin-left: 10%;
width: 80%;
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
</div>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>

Why is my modal opening on the bottom of page?

I have built a modal and inserted it into my code, however whenever I press the button that is supposed to open it up it goes to the bottom of the page. It is supposed to be on top of the rest of the page with a blurry bg, per say, but it just goes to the bottom of the page and it isn't even properly formatted. Here is an image.
Here is the code for that, the navbar and their css, and the modal js file.
https://repl.it/repls/GrubbyInsubstantialAutosketch
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<nav>
<div class="menu-center">
<input type="checkbox"id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<img src="logo-solo.png" >
<ul>
<li><a href="#home" class="active" > Home</a></li>
<li><a href="#quem-somos" >Quem somos</a></li>
<li>Onde Atuamos</li>
<li>Servicos</li>
<li>Depoimentos</li>
<li>comecando</li>
<li>Contacte-nos</li>
<a class="cta" rel="modal:open" href="#ex1" key="login" id="myBtn">Acessar</a>
</ul>
</div>
</nav>
<script src="scroll.js"></script>
<script type="text/javascript">
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
<div class="modal" id="modalContainer">
<div class="container" id="myModal">
<div class="form-container sign-up-container">
<form action="#">
<h1>MMT University</h1>
<span>Se registre para começar</span>
<input type="text" placeholder="Usuário" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Senha" />
<input type="password" placeholder="Repita a sua senha" />
<button>Registrar</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>Acessar</h1>
<span>Acesse a MMT University</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Senha" />
Esqueceu a senha?
<button>Acessar</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Bem vindo!</h1>
<p>Para continuar aprendendo, acesse a sua conta!</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>MMT University!</h1>
<p>Se registre para entrar na melhor universidade trading do mundo.</p>
<button class="ghost" id="signUp">Registre-se</button>
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
<script src="modal.js"></script>
</body>
Here is my css file, that has both the navbar and the modal code.
/*I could not add the justify content tag, it made my navbar disappear, this is my navbars css*/
body {
overflow-x: hidden;
display: flex;
align-items: center;
flex-direction: column;
font-family: 'Montserrat', sans-serif;
height: 100%;
}
a {
text-decoration: none;
}
nav {
height: 10vh;
background: #05031b;
opacity: 0.85;
transition: all 0.5s ease;
font-family: "Montserrat", sans-serif;
z-index: 1;
position: fixed;
width: 100%;
}
nav img {
height: 80px;
width: 80px;
margin-left: 5vh;
margin-top: 11px;
}
.social-media-icons {
position: absolute;
top: 10vh;
left: 0;
font-size: 8vh;
margin-right: 5vh;
}
.fa:hover {
opacity: 0.7;
}
.fa-youtube {
background: #05031b;
color: white;
margin-top: 0px;
font-size: 40px;
}
.fa-instagram {
background: #05031b;
color: white;
top: 0;
font-size: 50px;
margin-right: 5vh;
}
nav ul{
float: right;
margin-right: 10px;
margin-top: 20px;
}
nav ul li{
display: inline-block;
line-height: 50px;
margin: 5px 50px;
font-family: "Montserrat", sans-serif;
}
nav ul li a{
position: relative;
color: white;
font-size: 14px;
padding: 5px 6px;
font-family: "Montserrat", sans-serif;
text-transform: uppercase;
}
nav ul li a:before{
position: absolute;
content: '';
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: rgb(220,52,52);
transform: scaleX(0);
transform-origin: right;
transition: transform .4s linear;
font-family: "Montserrat", sans-serif;
}
nav ul li a:hover:before{
transform: scaleX(1);
transform-origin: left;
font-family: "Montserrat", sans-serif;
}
nav ul li a:hover{
border-radius: 4px;
transition: all 0.2s ease0;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
nav .active a:hover {
color: rgb(220,52,52);
}
nav .active a {
color: rgb(220,52,52);
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul {
margin: 0 0 0 0;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul li a{
padding: 32px 40px;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul li {
list-style: none;
margin: 0 0 0 -4px;
display: inline;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
.active, #menu-center ul li a:hover {
font-size: 14px;
color: rgb(220,52,52);
text-decoration: none;
background-color: rgba(0, 0, 0, 0.12);
}
a {
color: rgb(220,52,52);
}
#quem-somos {
color: rgb(220,52,52);
}
.cta {
padding: 9px 18px;
background-color: rgb(220,52,52);
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
right: 0;
margin-left: 20px;
text-decoration: none;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}
label #btn,
label #cancel{
color: red;
font-size: 30px;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
/*This is the modals css*/
h1 {
font-weight: bold;
margin: 0;
margin-bottom: 5vh;
}
h2 {
text-align: center;
}
p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
span {
font-size: 12px;
}
a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button {
border-radius: 20px;
border: 1px solid rgb(220,52,52);
background-color: rgb(220,52,52);
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: none;
}
button.ghost {
background-color: transparent;
border-color: #FFFFFF;
color: #fff;
background-color: rgb(220,52,52);
}
form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
overflow: auto;
}
input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container-form {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
#keyframes show {
0%, 49.99% {
opacity: 0;
z-index: 1;
}
50%, 100% {
opacity: 1;
z-index: 5;
}
}
.close {
/* Position it in the top right corner outside of the modal */
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
/* Close button on hover */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.overlay {
background: #05031b;
background: -webkit-linear-gradient(to right, #05031b, #05031b);
background: linear-gradient(to right, #05031b, #05031b);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
transform: translateX(0);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.container.right-panel-active .overlay-right {
transform: translateX(20%);
}
.social-container {
margin: 20px 0;
}
.social-container a {
border: 1px solid #DDDDDD;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
.modal {
position: fixed; /* position it so that fills the screen, but doesn't move with it */
top: 0; /* position this element at the top... */
left: 0; /* ...left corner of the page... */
width: 100%; /* ...and set both the width */
height: 100%; /* ...and height to 100%, so that the element fills the entire page */
z-index: 99999; /* set the z-index to a high enough number so that this element is positioned on top of all other elements */
background: rgb(0, 0, 0, 0.7); /* set the background to black with some transparency, so you can see through it */
/* The following simply centers the modal within this container */
display: flex;
justify-content: center;
align-items: center;
}
Now this is the modal.js, what controls the modals functions.
//Get the modal
var modal = document.getElementById("myModal");
var modal_container = document.getElementById("modalContainer")
modal_container.style.display = "none";
window.onclick = function (event) {
console.log(event.target)
if(event.target.id == "myBtn") {
modal_container.style.display = "flex"
}
else if (modal !== event.target && !modal.contains(event.target)) {
modal_container.style.display = "none";
}
}

You set an event handler for all links with href starting with '#' to scroll smoothly into view, but the href of the button that activates your modal windows is "#ex1". There is no "ex1" section in the document, which causes the script error.
A quick solution is to remove "#ex1" from the href attribute.
<a class="cta" rel="modal:open" href="" key="login" id="myBtn">Acessar</a>

Bottom of page is being cut off when there is more than 2 rows of elements?

This is a movie review app. Once you get past the 3rd row on PC and I believe the 3rd or 4th movie listing on mobile, it cuts off the review as seen in the image below. Only the buttons are cut off in that image, but if I added another row, it would be 100% cut off/hidden.
I tried adding height: 100% width:100% to my html and body elements, but that adds a second vertical scrollbar when I show the movie listings?
How can i fix this?
This is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/2a0c07254d.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="./css/main.css"></link>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;700&display=swap" rel="stylesheet">
<link rel="icon" href="./public/favicon.ico">
<title>Reviewer</title>
</head>
<body>
<div id="notification">
</div>
<header>
<h1>Reviewer</h1>
<h5>Create a movie review below or search for movie reviews by the movie title!</h5>
</header>
<div id="error-div"></div>
<form autocomplete="on" class="create-movie-form" action="submit">
<label for="title">Movie Title:</label>
<input type="text" name="title" alt="Movie title" id="title" placeholder="Movie Title" />
<label for="runtime">Movie Runtime (in minutes, numbers only):</label>
<input type="text" name="runtime" alt="Movie Runtime" id="runtime" placeholder="Runtime" />
<label for="rating">Movie Rating (Between 1 and 10, numbers only):</label>
<input type="text" name="rating" alt="Movie Rating" id="rating" placeholder="What's your rating for this movie?" />
<label for="review">Movie Review:</label>
<textarea name="review" alt="Movie Review" id="review" rows="4" cols="50" placeholder="Movie review"></textarea>
<button type="submit" id="create-btn">Create movie review</button>
</form>
<form autocomplete="on" id="get-movies-form" action="submit">
<label class='search-by-title-label' for="search-for-movie-input">Search by movie title:</label>
<div class="get-movies-div">
<input type='search' name="search-for-movie-input" alt="Search input" id='movie-title-to-search-input' placeholder="Search" />
<button id="get-movie-by-name-btn">Search</button>
</div>
</form>
<button id='display-all-movies-btn'>Display All Listings</button>
<div id='movie-list'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="../node_modules/axios/dist/axios.min.js"></script>
<script src="./js/functions.js"></script>
<script src="./js/movies.js"></script>
<script src="./js/main.js"></script>
</body>
</html>
This is my CSS
html, body {
font-family: 'Montserrat', sans-serif;
scroll-behavior: smooth;
overflow-x: hidden;
background: #fff;
}
* {
box-sizing: border-box;
}
/* KEYFRAMES */
#keyframes notificationSlideDown {
0%, 100% { transform: translateY(-50px);}
10%, 90% { transform: translateY(0px);}
}
#-webkit-keyframes notificationSlideDown {
0%, 100% { -webkit-transform: translateY(-50px);}
10%, 90% { -webkit-transform: translateY(0px);}
}
#-moz-keyframes notificationSlideDown {
0%, 100% { -moz-transform: translateY(-50px);}
10%, 90% { -moz-transform: translateY(0px);}
}
#keyframes sectionSlideDown {
0% { transform: translateY(-15%);}
100%{ transform: translateY(0);}
}
#keyframes h1-SlideDown {
0% { transform: translateY(-20%);}
100%{ transform: translateY(0);}
}
#keyframes h5-SlideDown {
0% {opacity: 0;}
0% { transform: translateY(-100%)}
100%{ transform: translateY(0);}
100% {opacity: 1;}
}
#keyframes fadeIn {
0% { opacity: 0;}
100% {opacity: 1;}
}
/* Notification box */
#notification {
display: none;
font-size: 20px;
font-weight: bolder;
position: fixed;
z-index: 101;
top: 0;
left: 0;
right: 0;
background: rgb(255, 255, 255);
color: rgb(0, 119, 255);
text-align: center;
line-height: 2.5;
overflow: hidden;
-webkit-box-shadow: 0 0 5px #000;
-mox-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
#close {
margin: auto;
color: #000;
z-index: 102;
}
.notification-animation {
animation: notificationSlideDown 1.5s ease forwards;
}
/* Header Elements */
header {
text-align: center;
letter-spacing: 1.5px;
color: rgb(0, 119, 255);
font-weight: bold;
}
h1, h5 {
margin-top: 5%;
margin-bottom: 0;
}
h1 {
font-size: 40px;
animation: h1-SlideDown 1.2s ease;
}
h5 {
font-size: 12px;
padding: 0 3%;
animation: h5-SlideDown 1.3s ease;
}
/* DIVS */
.get-movies-div {
text-align: center;
display: flex;
flex-flow: row;
justify-content: space-around;
}
.delete-and-update-btn-div {
text-align: center;
width: 100%;
position: absolute;
bottom: 10px;
}
#error-div, #section-error-div {
color: rgb(243, 86, 86);
text-align: center;
}
#section-error-div {
position: relative;
top: 0;
}
/* FORMS */
.create-movie-form {
display: flex;
flex-direction: column;
border-radius: 15px;
margin: auto;
font-family: 'Montserrat', sans-serif;
background-color: #fff;
padding-bottom: 5%;
padding-top: 3%;
}
#get-movies-form {
margin-top: -5%;
}
/* LABELS */
label {
color: rgb(0, 119, 255);
display: block;
width: 100%;
margin-top: 6%;
margin-left: 15%;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
}
.search-by-title-label {
margin-left: 15%;
}
/* INPUTS */
input, textarea {
font-family: 'Montserrat', sans-serif;
border-radius: 3px;
border: 1px rgb(173, 173, 173) solid;
margin: 0 auto auto auto;
padding: 2.5% 1.5%;
width: 70%;
}
input:focus, textarea:focus {
transition: .2s;
border-color: rgb(0, 119, 255);
outline: transparent;
}
#movie-title-to-search-input {
width: 44%;
}
/* BUTTONS */
button {
font-family: 'Montserrat', sans-serif;
outline: none;
padding: 2.2%;
border-radius: 5px;
font-weight: bolder;
font-size: 15px;
background: linear-gradient(90deg, rgb(0, 119, 255), rgb(0, 97, 243));
border: solid 1px transparent;
margin: 5% auto auto auto;
color: #fff;
letter-spacing: 1px;
}
button:hover {
cursor: pointer;
color: rgb(180, 180, 180);
transition: .2s;
transform: scale(.97);
background-color: rgb(0, 119, 255);
outline: rgb(0, 119, 255);
}
#create-btn {
width: 70%;
}
#get-movie-by-name-btn, #display-all-movies-btn {
font-weight: 700;
}
#get-movie-by-name-btn {
margin-top: 0;
margin-left: -14%;
width: 25%;
padding: 2.1% 1%;
}
#display-all-movies-btn {
margin-top: 5%;
margin-bottom: 7%;
width: 70%;
display: block;
}
.delete-btn, .update-btn {
margin: 0;
font-weight: 400;
padding: 1.5%;
width: 30%;
}
.delete-btn {
margin-right: 2%;
}
/* MOVIE LIST */
#movie-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-rows: 1fr;
grid-auto-flow: row;
column-gap: 1fr;
row-gap: 1fr;
margin-bottom: 5%;
overflow: hidden;
}
section {
border: 1px rgb(223, 223, 223) solid;
border-radius: 5px;
padding: 2%;
margin-top: 10%;
box-shadow: 0 10px 15px #d6d6d6;
outline: transparent;
background: #fff;
color: rgb(88, 88, 88);
position: relative;
animation:
sectionSlideDown .5s ease-out,
fadeIn .5s ease-in;
}
li {
list-style: none;
margin: 2% 0 5% -10%;
letter-spacing: .5px;
font-weight: 500;
color: rgb(0, 119, 255);
}
ul {
padding-bottom: 5%;
margin-bottom: 20%;
}
p {
display: inline;
overflow-wrap: break-word;
letter-spacing: .5px;
}
.rating,
.runtime,
.title,
.review {
color: rgb(65, 65, 65);
}
.id {
display: none;
}
#media only screen and (min-width: 768px) {
h5 {
font-size: 15px;
padding: 0 15%;
}
#error-div {
position: relative;
top: 40px;
}
label {
margin-top: 2%;
margin-left: 25%;
}
.search-by-title-label {
margin-left: 25%;
}
input, textarea {
width: 50%;
padding: 1.5%;
}
#movie-title-to-search-input {
width: 34%;
margin-right: 0;
}
#create-btn, #display-all-movies-btn {
width: 50%;
padding: 1.2%;
}
#get-movie-by-name-btn {
width: 15%;
padding: 1.3%;
margin: 0 25% 0 1%;
}
#movie-list {
grid-gap: 2.5%;
}
section {
margin-top: 0;
}
}
#media only screen and (min-width: 1024px) {
h5 {
font-size: 17px;
padding: 0 25%;
}
h1 {
margin: 1% 0 -3% 0;
font-size: 50px;
}
label {
margin-left: 32.5%;
}
.search-by-title-label {
margin-left: 32.5%;
}
input, textarea {
width: 35%;
padding: 1%;
}
#movie-title-to-search-input {
width: 26%;
margin-right: 0;
}
#create-btn, #display-all-movies-btn {
width: 35%;
padding: .9%;
margin-top: 1.5%;
}
#get-movie-by-name-btn {
width: 9%;
padding: .85%;
height: 10%;
margin: 0 32.4% 0 .25%;
}
}
#media only screen and (min-width: 1440px) {
#error-div {
top: 70px;
}
}
This is the HTML generated by my JavaScript for each movie review/section.
// Generate HTML for section elements holding movie data.
function generateHTML(res) {
const movie = res.data;
for (let i = 0; i<movie.length; i++) {
const sections = document.createElement('section');
sections.innerHTML = `
<div class='id'>${movie[i].id}</div>
<div id="section-error-div"></div>
<ul>
<li> Title: <p class='title'>${movie[i].title}</p> </li>
<li> Runtime: <p class='runtime'>${movie[i].runtime}</p> minutes</li>
<li> Rating: <p class='rating'>${movie[i].rating}</p>/10 </li>
<li> Review: <p class='review'>${movie[i].review}</p> </li>
</ul>
<div class="delete-and-update-btn-div">
<button class="delete-btn">Delete</button>
<button class="update-btn">Update</button>
</div>
`
movieListDiv.appendChild(sections);
}
}
Any help is appreciated!
Thank you!

I believe removing
overflow: hidden;
from
#movie-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-rows: 1fr;
grid-auto-flow: row;
column-gap: 1fr;
row-gap: 1fr;
margin-bottom: 5%;
overflow: hidden; <--- remove that
}
will fix that issue.

CSS & Javascript transform rotateY to back of element

here is what im trying to do:
1-zoom in and rotate it in center(done)
2-open card(done)
3-View back of the card, and then go to the front of the opened card again.
Any tips on how to do it? im confused, ive tried with z-index and rotate transformations, but no luck at all.
Is it correct until now? what do you suggest and how can i achieve rotating to the back of the whole card, then to the front?
thank you in advance
function pers(){
document.getElementById("wrap").style.transform = "rotateX(0deg) rotate(0deg)";
document.getElementById("wrap").style.width = "250px";
document.getElementById("wrap").style.height = "500px";
}
function openCard() {
var button = document.getElementById('button');
if(button.innerHTML == 'Open Card') {
button.innerHTML = 'Close Card';
} else {
button.innerHTML = 'Open Card';
}
var cards = document.querySelectorAll('.card');
for(var i = 0; i < cards.length; i++) {
cards[i].classList.toggle('open');
}
}
body {
margin: 0;
background-color: grey;
/*background: radial-gradient(circle at center, rgba(50,50,50,1) 0%,rgba(14,14,14,1) 35%) */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
perspective: 1000px;
transform-style: preserve-3d;
}
img {
max-width: 100%;
}
*, *:after, *:before {
box-sizing: border-box;
}
h2 {
font-family: "Dancing Script", serif;
font-weight: normal;
font-size: 45px;
color: #009500;
text-align: center;
}
.wrap {
width: 125px;
height: 250px;
position: relative;
transform: rotateX(40deg) rotate(15deg);
transform-style: preserve-3d;
box-shadow: 15px 10px 5px rgba(0, 0, 0, 0.3);
transition: all 3s linear;
}
.card {
height: 100%;
width: 100%;
background-color: #fff;
border-radius: 2px;
position: relative;
border: 4px solid black;
text-align: center;
}
.card--front {
transform: rotateY(-20deg);
display: flex;
align-items: center;
justify-content: center;
transition: all 3.5s cubic-bezier(0.4, 0, 1, 1);
transform-origin: center left;
position: absolute;
top: 0;
left: 0;
z-index: 2;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.card--front.open {
transform: rotateY(-180deg);
box-shadow: 15px 10px 5px rgba(0, 0, 0, 0.3);
}
.card--front.back {
z-index: 0;
backface-visibility: visible;
-webkit-backface-visibility: visible;
}
.card--inner {
overflow: hidden;
padding: 15px;
}
.card--inner h2 {
font-size: 32px;
}
.card--inner img {
max-width: 60%;
margin-top: 1.5em;
}
.card--inner.open:before {
transform: translateX(-155%);
opacity: 0.1;
}
.card--inner:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 1;
opacity: 1;
transition: all 1s ease-in-out;
}
button {
-webkit-appearance: none;
background: #E53935;
border: 5px solid #9f1815;
border-width: 0 0 5px;
padding: 10px 20px;
width: 150px;
text-align: center;
display: block;
transform: rotateX(30deg);
margin-top: 20px;
box-shadow: 0 4px 2px rgba(0, 0, 0, 0.3);
}
button:active {
border-bottom-width: 2px;
margin-top: 23px;
outline: none;
}
button:focus {
outline: none;
}
<div class="wrap" id="wrap">
<div class="card card--inner" style="background-color:white;">
<h2 style="display:inline;width:90%;height:20%;background-color:#8eb9ff;position:absolute;left:3%;top:4%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:60%;height:10%;background-color:#8eb9ff;position:absolute;left:20%;top:28%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:90%;height:37.5%;background-color:#8eb9ff;position:absolute;left:3%;top:41%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:30%;height:10%;background-color:#8eb9ff;position:absolute;right:3%;top:84%;margin:0px 5px;"></h2>
</div>
<div id="cc" style="background-color:white;" class="card card--front back" onclick="openCard();">
<h2 style="display:inline;width:90%;height:46.5%;background-color:#8eb9ff;position:absolute;left:3%;top:51%;margin:0px 5px;z-index;1000;"></h2>
<h2 style="display:inline;width:90%;height:46.5%;background-color:#8eb9ff;position:absolute;left:3%;top:3%;margin:0px 5px;z-index;1000;"></h2>
</div>
<div class="card card--front" onclick="openCard();">
<h2 style="display:inline;width:90%;height:20%;background-color:#8eb9ff;position:absolute;left:3.5%;top:4%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:60%;height:10%;background-color:#8eb9ff;position:absolute;left:20.5%;top:28%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:80%;height:6%;background-color:#8eb9ff;position:absolute;left:9%;top:43%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:90%;height:46.5%;background-color:#8eb9ff;position:absolute;left:4%;top:53%;margin:0px 5px;"></h2>
</div>
</div>
<button type="button" onclick="pers();setTimeout(openCard, 2000);" id="button">Open Card</button>

CSS :hover not applied on some elements

I experience a strange problem..
On some elements the :hover effect is not applied
html,
body {
height: 100%;
}
body {
margin: 0;
color: #3b3b3b;
font-family: tahoma;
font-size: 12px;
background: #f5f5f5;
}
body.toggle {
overflow: hidden;
}
#main_content {
height: 100%;
}
#preloader_content {
z-index: 99999;
position: absolute;
top: 0;
left: 0;
background: #303030;
width: 100%;
height: 100%;
}
#preloader_content > div {
position: absolute;
width: 200px;
}
#preloader_percentage {
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
font-size: 32px;
font-family: arial;
font-weight: bold;
text-align: center;
}
#container {
padding-top: 80px;
height: 100%;
box-sizing: border-box;
}
#header {
position: fixed;
top: 0;
z-index: 1;
height: 80px;
min-width: 600px;
width: 100%;
box-sizing: border-box;
}
#header_mobile {
height: 100%;
display: none;
box-sizing: border-box;
background: #303030;
color: #d9d9d9;
}
#header_desktop {
height: 100%;
margin-left: 200px;
box-sizing: border-box;
background: #fff;
}
#sidebar {
position: fixed;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
width: 200px;
background: #303030;
color: #d9d9d9;
box-sizing: border-box;
}
#sidebar.toggle {
z-index: 0;
display: block;
}
#logo {
position: absolute;
}
#menu {
position: absolute;
top: 80px;
width: 100%;
bottom: 0;
overflow-y: auto;
}
#main {
position: absolute;
z-index: -1;
min-width: 600px;
width: 100%;
max-width: 1400px;
padding-left: 200px;
box-sizing: border-box;
}
.mobile_header_actions {
float: right;
}
.mobile_header_actions > div {
display: inline-block;
margin-right: 20px;
}
.btn_mobile_header_toggle {
background: url(/gfx/btn.mobile_header_toggle.png) no-repeat center;
cursor: pointer;
height: 50px;
width: 50px;
}
.btn_mobile_header_toggle.toggle {
background-color: rgba(0, 0, 0, 0.5);
}
.sidebar_page_ul,
.sidebar_subpage_ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
.sidebar_section {
padding: 10px 10px 10px 20px;
font-size: 11px;
color: #c2c2c2;
}
.sidebar_page {
padding: 10px 10px 10px 30px;
font-size: 13px;
font-weight: bold;
transition: background-color 0.2s ease 0s;
cursor: pointer;
}
.sidebar_arrow {
background: url(/gfx/sidebar_arrow.png) no-repeat center;
float: right;
height: 18px;
width: 18px;
}
.sidebar_arrow.active {
transform: rotate(90deg);
}
.sidebar_subpage_ul {
display: none;
}
.sidebar_subpage_ul.active {
display: block;
}
.sidebar_subpage {
padding: 10px 10px 10px 30px;
background-color: rgba(0, 0, 0, 0.35);
font-size: 13px;
transition: background-color 0.2s ease 0s;
cursor: pointer;
opacity: 0;
}
.sidebar_page.active,
.sidebar_page:hover,
.sidebar_subpage.active,
.sidebar_subpage:hover {
background-color: rgba(0, 0, 0, 0.2);
color: #fff;
}
#media (max-width: 767px) {
#container {
padding-top: 50px;
}
#header {
height: 50px;
}
#header_mobile {
display: block;
}
#header_desktop {
display: none;
}
#sidebar {
display: none;
}
#menu {
top: 50px;
}
#main {
padding-left: 0;
}
}
#media (min-width: 768px) {
#sidebar {
width: 200px !important;
}
#main {
left: 0 !important;
}
}
#media (min-width: 992px) {}#media (min-width: 1200px) {} button {
background:linear-gradient(#f5f5f5,
#f1f1f1);
border:1px solid rgba(0,
0,
0,
0.1);
box-sizing:content-box;
border-radius:2px;
display:inline-block;
min-width:50px;
color:#444;
font-size:11px;
font-weight:bold;
padding:4px 8px 5px 8px;
text-align:center;
transition:all 300ms ease 0s;
margin:0 6px 0 0;
cursor:pointer;
}
button:hover {
background: linear-gradient(#f8f8f8, #f1f1f1);
border-color: #c6c6c6;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
color: #222;
}
button.cta {
background: linear-gradient(#4d90fe, #4787ed);
border: 1px solid #3079ed;
color: #fff;
}
button.cta:hover {
background: linear-gradient(#4d90fe, #357ae8);
border-color: #2f5bb7;
}
<div id="main_content">
<div id="container">
<div id="header">
<div id="header_mobile">Header Mobile
<button class="cta" id="e1">Log off</button>
<div class="mobile_header_actions">
<div class="btn_mobile_header_toggle" id="e3"></div>
</div>
</div>
<div id="header_desktop">Header Desktop
<button class="cta" id="e2">Log off</button>
</div>
</div>
<div id="sidebar">
<div id="logo">Logo</div>
<div id="menu">
<div id="e0">
<ul class="sidebar_page_ul">
<li>
<div class="sidebar_section">Accounts</div>
</li>
<li>
<div class="sidebar_page" id="e4">Overview</div>
</li>
<li>
<div class="sidebar_page" id="e5">Bookkeeping
<div class="sidebar_arrow"></div>
</div>
<ul class="sidebar_subpage_ul" id="e6">
<li>
<div class="sidebar_subpage" id="e7">Bilag</div>
</li>
<li>
<div class="sidebar_subpage" id="e8">Daglig</div>
</li>
</ul>
</li>
<li>
<div class="sidebar_page active" id="e9">
Chart of accounts
</div>
</li>
<li>
<div class="sidebar_section">Administration</div>
</li>
<li>
<div class="sidebar_page" id="e10">Client</div>
</li>
<li>
<div class="sidebar_page" id="e11">Accounts</div>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<div style="padding:20px">
account
<button>Test</button>
<button class="cta">Test</button>
</div>
</div>
</div>
</div>
The logoff button in the header has the :hover effect but the two Test buttons in the main content hasn't
What am I doing wrong?!

That's because the #main style has z-index: -1. That places it behind the container element.

You have
#main {
position: absolute;
z-index: -1;
}
#main's parent, #container, doesn't create any stacking context (because it has default opacity and isn't a positioned element with z-index different than auto). Therefore, #main and #container belong to the same stacking context.
Then, since #main is a stacking context with negative stack level, it will be shown under (in z-axis) the background of #container. Then, hovering #main contents is like hovering parent's background.
Therefore, :hover doesn't apply.
html,
body {
height: 100%;
}
body {
margin: 0;
color: #3b3b3b;
font-family: tahoma;
font-size: 12px;
background: #f5f5f5;
}
body.toggle {
overflow: hidden;
}
#main_content {
height: 100%;
}
#preloader_content {
z-index: 99999;
position: absolute;
top: 0;
left: 0;
background: #303030;
width: 100%;
height: 100%;
}
#preloader_content > div {
position: absolute;
width: 200px;
}
#preloader_percentage {
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
font-size: 32px;
font-family: arial;
font-weight: bold;
text-align: center;
}
#container {
padding-top: 80px;
height: 100%;
box-sizing: border-box;
}
#header {
position: fixed;
top: 0;
z-index: 1;
height: 80px;
min-width: 600px;
width: 100%;
box-sizing: border-box;
}
#header_mobile {
height: 100%;
display: none;
box-sizing: border-box;
background: #303030;
color: #d9d9d9;
}
#header_desktop {
height: 100%;
margin-left: 200px;
box-sizing: border-box;
background: #fff;
}
#sidebar {
position: fixed;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
width: 200px;
background: #303030;
color: #d9d9d9;
box-sizing: border-box;
}
#sidebar.toggle {
z-index: 0;
display: block;
}
#logo {
position: absolute;
}
#menu {
position: absolute;
top: 80px;
width: 100%;
bottom: 0;
overflow-y: auto;
}
#main {
position: absolute;
min-width: 600px;
width: 100%;
max-width: 1400px;
padding-left: 200px;
box-sizing: border-box;
}
.mobile_header_actions {
float: right;
}
.mobile_header_actions > div {
display: inline-block;
margin-right: 20px;
}
.btn_mobile_header_toggle {
background: url(/gfx/btn.mobile_header_toggle.png) no-repeat center;
cursor: pointer;
height: 50px;
width: 50px;
}
.btn_mobile_header_toggle.toggle {
background-color: rgba(0, 0, 0, 0.5);
}
.sidebar_page_ul,
.sidebar_subpage_ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
.sidebar_section {
padding: 10px 10px 10px 20px;
font-size: 11px;
color: #c2c2c2;
}
.sidebar_page {
padding: 10px 10px 10px 30px;
font-size: 13px;
font-weight: bold;
transition: background-color 0.2s ease 0s;
cursor: pointer;
}
.sidebar_arrow {
background: url(/gfx/sidebar_arrow.png) no-repeat center;
float: right;
height: 18px;
width: 18px;
}
.sidebar_arrow.active {
transform: rotate(90deg);
}
.sidebar_subpage_ul {
display: none;
}
.sidebar_subpage_ul.active {
display: block;
}
.sidebar_subpage {
padding: 10px 10px 10px 30px;
background-color: rgba(0, 0, 0, 0.35);
font-size: 13px;
transition: background-color 0.2s ease 0s;
cursor: pointer;
opacity: 0;
}
.sidebar_page.active,
.sidebar_page:hover,
.sidebar_subpage.active,
.sidebar_subpage:hover {
background-color: rgba(0, 0, 0, 0.2);
color: #fff;
}
#media (max-width: 767px) {
#container {
padding-top: 50px;
}
#header {
height: 50px;
}
#header_mobile {
display: block;
}
#header_desktop {
display: none;
}
#sidebar {
display: none;
}
#menu {
top: 50px;
}
#main {
padding-left: 0;
}
}
#media (min-width: 768px) {
#sidebar {
width: 200px !important;
}
#main {
left: 0 !important;
}
}
#media (min-width: 992px) {}#media (min-width: 1200px) {} button {
background:linear-gradient(#f5f5f5,
#f1f1f1);
border:1px solid rgba(0,
0,
0,
0.1);
box-sizing:content-box;
border-radius:2px;
display:inline-block;
min-width:50px;
color:#444;
font-size:11px;
font-weight:bold;
padding:4px 8px 5px 8px;
text-align:center;
transition:all 300ms ease 0s;
margin:0 6px 0 0;
cursor:pointer;
}
button:hover {
background: linear-gradient(#f8f8f8, #f1f1f1);
border-color: #c6c6c6;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
color: #222;
}
button.cta {
background: linear-gradient(#4d90fe, #4787ed);
border: 1px solid #3079ed;
color: #fff;
}
button.cta:hover {
background: linear-gradient(#4d90fe, #357ae8);
border-color: #2f5bb7;
}
<div id="main_content">
<div id="container">
<div id="header">
<div id="header_mobile">Header Mobile
<button class="cta" id="e1">Log off</button>
<div class="mobile_header_actions">
<div class="btn_mobile_header_toggle" id="e3"></div>
</div>
</div>
<div id="header_desktop">Header Desktop
<button class="cta" id="e2">Log off</button>
</div>
</div>
<div id="sidebar">
<div id="logo">Logo</div>
<div id="menu">
<div id="e0">
<ul class="sidebar_page_ul">
<li>
<div class="sidebar_section">Accounts</div>
</li>
<li>
<div class="sidebar_page" id="e4">Overview</div>
</li>
<li>
<div class="sidebar_page" id="e5">Bookkeeping
<div class="sidebar_arrow"></div>
</div>
<ul class="sidebar_subpage_ul" id="e6">
<li>
<div class="sidebar_subpage" id="e7">Bilag</div>
</li>
<li>
<div class="sidebar_subpage" id="e8">Daglig</div>
</li>
</ul>
</li>
<li>
<div class="sidebar_page active" id="e9">
Chart of accounts
</div>
</li>
<li>
<div class="sidebar_section">Administration</div>
</li>
<li>
<div class="sidebar_page" id="e10">Client</div>
</li>
<li>
<div class="sidebar_page" id="e11">Accounts</div>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<div style="padding:20px">
account
<button>Test</button>
<button class="cta">Test</button>
</div>
</div>
</div>
</div>

very simple.
just change the width of sidebar and you'll see it is working fine.
actually sidebar is overlapping on your main div.
check this below
http://oi61.tinypic.com/20j0182.jpg