Blank space in the bottom of HTML page - javascript

I have one very difficult problem for me when finishing my HTML project. The problem is there's a blank space at the bottom of my HTML page. I've tried every way to remove it but then when I try it, the other element will be messy. How to remove the blank space while keeping the other element?
Here's my code:
/* CSS Reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: black;
}
img {
max-width: 100%;
height: auto;
}
ul, ol {
list-style: none;
}
h1, h2, h3 {
font-family: roboto light;
}
p {
font-family: open sans;
}
::-webkit-scrollbar {
width: 17px;
height: 10px;
}
::-webkit-scrollbar-track {
background-color: rgba(0,0,0.1);
border-radius: 2px;
}
::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: #3498db;
transition: all .4 linear;
}
::-webkit-scrollbar-thumb:hover {
background-color: #2980b9;
}
.container4 {
width: 100%;
height: 600px;
padding-bottom: -1000px;
}
.header4 {
text-align: center;
padding-top: 80px;
color: #424242;
}
/* Flipper */
/* entire container, keeps perspective */
.flip-container {
position: relative;
top: 20px;
left: 50px;
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 200px;
height: 200px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
/* End Flipper */
.tim1 {
width: 300px;
height: 480px;
background-color: #EEEEEE;
margin-left: 25px;
border: 4px solid #FAFAFA;
text-align: center;
transition: all .4s ease-in-out;
}
.tim1:hover {
border: 4px solid #ecf0f1;
background-color: #E0E0E0;
}
.tim2 {
width: 300px;
height: 480px;
background-color: #EEEEEE;
position: relative;
top: -489px;
left: 355px;
border: 4px solid #FAFAFA;
text-align: center;
transition: all .4s ease-in-out;
}
.tim2:hover {
border: 4px solid #ecf0f1;
background-color: #E0E0E0;
}
.tim3 {
width: 300px;
height: 480px;
background-color: #EEEEEE;
position: relative;
top: -978px;
left: 685px;
border: 4px solid #FAFAFA;
text-align: center;
transition: all .4s ease-in-out;
}
.tim3:hover {
border: 4px solid #ecf0f1;
background-color: #E0E0E0;
}
.tim4 {
width: 300px;
height: 480px;
background-color: #EEEEEE;
position: relative;
top: -1468px;
left: 1015px;
border: 4px solid #FAFAFA;
text-align: center;
transition: all .4s ease-in-out;
}
.tim4:hover {
border: 4px solid #ecf0f1;
background-color: #E0E0E0;
}
#-webkit-keyframes efekgambar {
0% {
-webkit-filter: contrast(400%) grayscale(0%);
}
100% {
-webkit-filter: contrast(100%) grayscale(100%);
}
}
#-webkit-keyframes terang {
0% {
-webkit-filter: brightness(100%);
}
100% {
-webkit-filter: brightness(125%);
}
}
.orang1, .orang2, .orang3, .orang4 {
animation-name: terang;
animation-duration: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
border: 4px solid #ecf0f1;
}
.orang1back, .orang2back, .orang3back, .orang4back {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
border: 4px solid #ecf0f1;
animation-name: efekgambar;
animation-direction: alternate;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.orang1:hover, .orang1back:hover, .orang2:hover, .orang2back:hover,
.orang3:hover, .orang3back:hover, .orang4:hover, .orang4back:hover {
border: 4px solid #EEEEEE;
}
.sosial-media ul {
display: flex;
float: left;
position: relative;
top: 30px;
left: 70px;
}
.sosial-media ul li {
list-style: none;
}
.sosial-media ul li a {
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
margin: 0 2px;
display: block;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 4px solid #FAFAFA;
z-index: 1;
}
.fb {
background: #507cd3;
}
.tw {
background: #7fc9ff;
}
.gp {
background: #ff6251;
}
.ig {
background: #ff5b79;
}
.sosial-media ul li a .fa {
position: relative;
color: #FAFAFA;
transition: .5s;
z-index: 3;
}
.sosial-media ul li a:hover .fa {
transform: rotateY(360deg);
}
.sosial-media ul li a:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #f00;
transition: .5s;
z-index: 2;
}
.sosial-media ul li a:hover:before {
top: 0;
}
.sosial-media ul li:nth-child(1) a:before {
background: #3b5999;
}
.sosial-media ul li:nth-child(2) a:before {
background: #55acee;
}
.sosial-media ul li:nth-child(3) a:before {
background: #dd4b39;
}
.sosial-media ul li:nth-child(4) a:before {
background: #e4405f;
}
/* End Container4 */
/* Container5 */
.container5 {
width: 100%;
height: 450px;
position: relative;
top: -1400px;
margin-top: 30px;
background-image: url('1.png');
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.header5 {
color: #000;
position: absolute;
top: 30px;
left: 100px;
text-align: center;
padding-top: 40px;
}
.progress {
position: absolute;
top: 125px;
left: 800px;
width: 450px;
height: 100%;
color: #FAFAFA;
}
.bar {
height: 20px;
background: #FAFAFA;
color: #FAFAFA;
text-align: right;
width: 100%;
margin-bottom: 20px;
font-size: 10pt;
font-weight: bold;
}
.level {
height: 20px;
width: 80%;
}
#-webkit-keyframes eighty {
0% {
width: 0px;
}
100% {
width: 80%;
}
}
.eighty.start {
width: 0px;
background: #2EA2DB;
animation: eighty 2s ease-out forwards;
-webkit-animation: eighty 2s ease-out forwards;
}
#-webkit-keyframes eightyfive {
0% {
width: 0px;
}
100% {
width: 85%;
}
}
.eightyfive.start {
width: 0px;
background: #2EA2DB;
animation: eightyfive 2s ease-out forwards;
-webkit-animation: eightyfive 2s ease-out forwards;
}
#-webkit-keyframes seventy {
0% {
width: 0px;
}
100% {
width: 80%;
}
}
.seventy.start {
width: 0px;
background: #2EA2DB;
animation: seventy 2s ease-out forwards;
-webkit-animation: seventy 2s ease-out forwards;
}
#-webkit-keyframes ninety {
0% {
width: 0px;
}
100% {
width: 90%;
}
}
.ninety.start {
width: 0px;
background: #2EA2DB;
animation: ninety 2s ease-out forwards;
-webkit-animation: ninety 2s ease-out forwards;
}
/* End Container5 */
.container6 {
width: 100%;
height: 800px;
background-color: maroon;
}
<!-- Container4 -->
<div class="container4">
<a id="tim"></a>
<div class="wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
<h1 class="header4">Tim</h1>
<hr width="80px" color="#F16051" style="position: absolute; left: 635px;">
<p align="center" style="margin-top: 10px; margin-bottom: 10px;"><font color="#212121">Dibawah ini adalah para ahli yang siap melayani Anda.</font></p>
</div>
<div class="tim1 wow slideInLeft" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="wow rotateIn flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img class="orang1" src="orang1.jpg">
</div>
<div class="back">
<img class="orang1back" src="orang1.jpg">
</div>
</div>
</div>
<h3 style="margin-top: 40px;"><font color="#424242">Muhammad Anas</font></h3>
<p style="position: relative; top: 10px;"><i><font face="roboto" color="#212121">CEO & Founder</font></i></p>
<hr width="110px" height="2px" color="#424242" style="position: relative; top: 10px; left: 95px;">
<p style="padding: 8px 16px; position: relative; top: 20px"><font size="3pt">Penemu sekaligus <i>Leader</i> Jasa Pembuatan Blog Anas. Salah satu Blogger Indonesia dan sangat gemar menulis artikel.</p>
<div class="sosial-media">
<ul>
<li class="facebook"><i class="fa fa-facebook"></i></li>
<li class="twitter"><i class="fa fa-twitter"></i></li>
<li class="google-plus"><i class="fa fa-google-plus"></i></li>
<li class="instagram"><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
<div class="tim2 wow slideInLeft" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="wow rotateIn flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img class="orang2" src="orang1.jpg">
</div>
<div class="back">
<img class="orang2back" src="orang1.jpg">
</div>
</div>
</div>
<h3 style="margin-top: 40px;"><font color="#424242">Vickri Style</font></h3>
<p style="position: relative; top: 10px;"><i><font face="roboto" color="#212121">Desainer</font></i></p>
<hr width="70px" height="2px" color="#424242" style="position: relative; top: 10px; left: 113px;">
<p style="padding: 8px 16px; position: relative; top: 20px"><font size="3pt">Seorang desainer amatir yang mempunyai kemampuan hebat. Gemar mendekatkan diri dengan alam.</p>
<div class="sosial-media">
<ul>
<li class="facebook"><i class="fa fa-facebook"></i></li>
<li class="twitter"><i class="fa fa-twitter"></i></li>
<li class="google-plus"><i class="fa fa-google-plus"></i></li>
<li class="instagram"><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
<div class="tim3 wow slideInRight" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="wow rotateIn flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img class="orang1" src="orang1.jpg">
</div>
<div class="back">
<img class="orang1back" src="orang1.jpg">
</div>
</div>
</div>
<h3 style="margin-top: 40px;"><font color="#424242">Adhitya Mahendra</font></h3>
<p style="position: relative; top: 10px;"><i><font face="roboto" color="#212121">Penulis</font></i></p>
<hr width="60px" height="2px" color="#424242" style="position: relative; top: 10px; left: 118px;">
<p style="padding: 8px 16px; position: relative; top: 20px"><font size="3pt">Penulis artikel untuk Jasa Pembuatan Blog Anas. Paling tahu dan paling update seputar dunia teknologi.</p>
<div class="sosial-media">
<ul>
<li class="facebook"><i class="fa fa-facebook"></i></li>
<li class="twitter"><i class="fa fa-twitter"></i></li>
<li class="google-plus"><i class="fa fa-google-plus"></i></li>
<li class="instagram"><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
<div class="tim4 wow slideInRight" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="wow rotateIn flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img class="orang1" src="orang1.jpg">
</div>
<div class="back">
<img class="orang1back" src="orang1.jpg">
</div>
</div>
</div>
<h3 style="margin-top: 40px;"><font color="#424242">Muhammad Andhika Ramadhan</font></h3>
<p style="position: relative; top: 10px;"><i><font face="roboto" color="#212121">Social Marketing</font></i></p>
<hr width="120px" height="2px" color="#424242" style="position: relative; top: 10px; left: 90px;">
<p style="padding: 8px 16px; position: relative; top: 20px"><font size="3pt">Ahli dalam berbicara dan orang yang mempromosikan Jasa Pembuatan Blog Anas. Sangat gemar bermain game.</p>
<div class="sosial-media">
<ul>
<li class="facebook"><i class="fa fa-facebook"></i></li>
<li class="twitter"><i class="fa fa-twitter"></i></li>
<li class="google-plus"><i class="fa fa-google-plus"></i></li>
<li class="instagram"><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
<!-- End Container4 -->
<!-- Container5 -->
<div class="container5">
<div class="wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms">
<h1 class="header5">Skill Kami</h1>
<hr width="140px" color="#2EA2DB" style="position: relative; top: 110px; left: 100px;">
<p style="color: #FAFAFA; position: absolute; top: 130px; left: 100px; margin-right: 700px;">
Tim Jasa Pembuatan Blog Anas terdiri dari 4 ahli professional yang sudah sangat berpengalaman dalam bidang mereka masing-masing. Ketika 4 professional tersebut bersatu maka akan tercipta sebuah pernyataan yang bisa menyimpulkan skill yang dimiliki oleh Jasa Pembuatan Blog Anas. Dan disebelah kanan adalah skill yang kami miliki hingga saat ini dan akan terus berkembang.
</p>
<p style="color: #FAFAFA; position: absolute; top: 280px; left: 100px; margin-right: 700px;">
Dengan skill yang sudah lebih dari standar, dapat dijamin bahwa layanan yang tim Jasa Pembuatan Blog Anas akan memenuhi segala keinginan Anda.
</p>
</div>
<div class="progress wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms">
<p>UX dan UI</p>
<div class="bar">
<div class="level eighty">
<p style="padding-right: 20px;">80%</p>
</div>
</div>
<p>Web Desain</p>
<div class="bar">
<div class="level eightyfive">
<p style="padding-right: 20px;">85%</p>
</div>
</div>
<p>Web Programming</p>
<div class="bar">
<div class="level seventy">
<p style="padding-right: 20px;">70%</p>
</div>
</div>
<p>Search Engine Optimization</p>
<div class="bar">
<div class="level ninety">
<p style="padding-right: 20px;">90%</p>
</div>
</div>
</div>
</div>
<!-- End Container5 -->


Change your starting tag with this
<body style="margin-buttom:-50;">
change -50 according to your need.


You have no margin in the html, body tag. Try to change css line with '*' to html, body and make it padding ang margin 0.
html, body { margin: 0; padding: 0; }

Related

Search bar seems to be acting as if its position is sticky but I have it set to fixed yet it still moves down when I scroll

NOTE: TO VIEW SEARCH BAR BE SURE TO OPEN THE SNIPPET IN FULL SCREEN
Can someone help me fix this search button so that it doesnt move down the screen when I scroll.
I have it set to position: fixed but for some reason its still scrolling down.
Here is my website so far and I have the search bar on the far right corner. See snippet below (also please view it in full screen to see the search bar properly):
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pathway+Gothic+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#1,200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Allerta&display=swap" rel="stylesheet">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes" />
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
background: white;
}
.third-level-menu {
position: absolute;
top: 0;
right: -190px;
width: 190px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu>li {
height: 45px;
background-color: #6640C1;
background: #6640C1;
}
.third-level-menu>li:hover {
background-color: gold;
}
.second-level-menu {
position: absolute;
top: 45px;
left: 0;
width: 100%;
/* width: 273.2px; */
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu>li {
position: relative;
height: 45px;
background-color: #6640C1;
background: #6640C1;
width: 100%;
}
.second-level-menu>li:hover {
background-color: gold;
}
.top-level-menu {
display: flex;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 100px;
z-index: 1;
justify-content: space-between;
}
.top-level-menu>li {
position: relative;
height: 30px;
/* width: 273.2px; */
background: #6640C1;
z-index: 2;
text-align: center;
flex: 1;
}
.top-level-menu>li:hover {
background-color: gold !important;
}
.top-level-menu li:hover>ul {
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a
/* Apply to all links inside the multi-level menu */
{
font-family: 'Fjalla One', sans-serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
background: #6640C1;
/* Make the link cover the entire list item-container */
display: block;
line-height: 45px;
}
.top-level-menu a:hover {
color: #000000;
background-color: gold;
}
.container1 {
max-width: 1200px;
margin: auto;
background-color: white;
overflow: auto;
}
.gallery {
margin: 5px;
border: 5px solid black;
border-radius: 5%;
float: left;
width: 390px;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 5%;
}
.gallery:hover {
transform: scale(1.03);
}
.desc {
padding: 15px;
text-align: center;
font-family: 'Fjalla One', sans-serif;
;
}
#main-title {
font-family: 'Alfa Slab One', cursive;
color: black;
font-size: 60px;
margin: 20px;
padding: 30px;
position: relative;
bottom: -20px;
background-color: transparent;
display: inline-block;
text-align: center;
}
.footer {
background-color: black;
font-family: Verdana, Geneva, Tahoma, sans-serif;
width: 100%;
color: white;
height: 300px;
}
.footer a {
text-decoration: none;
color: white;
}
.container2 {
max-width: 1500px;
margin: auto;
overflow: auto;
}
.container-top {
position: fixed;
background-color: gold;
top: 0;
width: 100%;
height: 10%;
z-index: 1;
text-align: center;
}
.top {
display: inline-block;
font-family: 'Permanent Marker', cursive;
font-size: 30px;
width: 100%;
margin: -20px;
z-index: 1;
}
body {
font-family: Verdana, sans-serif;
}
.mySlides {
object-fit: cover;
width: 100%;
}
.moving-images {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: auto;
position: relative;
margin-top: -4%;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 2px 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
.arrow {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
align-items: center;
}
.arrow i:hover {
color: black;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.title-block {
position: relative;
background-color: white;
font-family: 'Alfa Slab One', cursive;
width: 100%;
color: black;
margin: 50px 0 0 0px;
height: 20px;
text-decoration: none;
}
:root {
--line-thickness: 0.1em;
--glass-size: 50%;
--icon-height: 2.5rem;
--transition-speed: 0.15s;
--timing-function: cubic-bezier(0.66, 1.51, 0.77, 1.13);
--icon-color: black;
}
/* this is already done */
* {
box-sizing: border-box;
}
body {
margin: 0;
background: white;
background-repeat: no-repeat;
background-attachment: fixed;
}
.search-icon {
box-sizing: border-box;
width: 30px;
height: 30px;
max-width: 20em;
transition: all var(--transition-speed) linear, border-color 0s linear var(--transition-speed);
position: fixed;
top: 0;
right: 0;
bottom: 400px;
left: 0;
margin: auto;
border: solid var(--line-thickness);
border-color: rgba(255, 255, 255, 0);
border-radius: 100px;
padding: 0.25em;
}
.search-icon__wrapper {
width: var(--icon-height);
height: var(--icon-height);
position: absolute;
border-radius: 100px;
top: 0;
bottom: 0;
right: 0;
margin: auto 0;
transform: rotate(-45deg);
transition: all 0 linear;
}
.search-icon__wrapper:hover {
cursor: pointer;
}
.search-icon__input {
background: none;
text-align: center;
outline: none;
display: block;
border: none;
background: rgba(255, 255, 255, 0);
width: calc(90% - (var(--icon-height) / 2 + 1rem));
margin-right: 6rem;
height: 100%;
border-radius: 100px;
transition: all var(--transition-speed) linear;
font-size: 20px;
padding: 0 0.5em;
color: black;
}
.search-icon__input::placeholder {
color: grey;
}
.search-icon__glass {
width: var(--glass-size);
height: var(--glass-size);
border: solid var(--line-thickness);
border-color: var(--icon-color);
border-radius: 100px;
margin: 0 auto;
position: relative;
transition: all var(--transition-speed) var(--timing-function) var(--transition-speed), border-color 0s linear var(--transition-speed);
}
.search-icon__handle {
height: calc(100% - var(--glass-size));
width: var(--line-thickness);
margin: 0 auto;
background: var(--icon-color);
position: absolute;
border-radius: 0 0 100px 100px;
left: 0;
right: 0;
bottom: 0;
transition: all var(--transition-speed) var(--timing-function);
transition-delay: var(--transition-speed);
}
.search-icon__handle::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
background: var(--icon-color);
transform: rotate(0deg);
transition: all var(--transition-speed) var(--timing-function);
transition-delay: 0s;
}
.search-icon.open {
width: 200px;
border-color: var(--icon-color);
transition-delay: var(--transition-speed);
}
.search-icon.open .search-icon__input {
transition-delay: var(--transition-speed);
}
.search-icon.open .search-icon__glass {
width: 45%;
height: 45%;
transition: all var(--transition-speed) var(--timing-function) 0s, border-color 0s linear var(--transition-speed);
border-color: rgba(0, 0, 0, 0);
}
.search-icon.open .search-icon__handle {
bottom: calc(50% - (100% - var(--glass-size)) / 2);
border-radius: 100px;
transition-delay: 0s;
}
.search-icon.open .search-icon__handle::after {
transition-delay: var(--transition-speed);
transform: rotate(90deg);
}
</style>
<title>TheLeague.com</title>
</head>
<body>
<main>
<div class="container-top">
<div class="top">
<p>Shop 20% Off All Jerseys Now!</p>
</div>
</div>
<div class="title-block">
<div style="float:right; margin: 0 auto;">
<div class=" search-icon" style="margin-right: 50px; position: fixed;">
<input class="search-icon__input" placeholder="search ...">
<div class="search-icon__wrapper">
<div class="search-icon__glass"></div>
<div class="search-icon__handle"></div>
</div>
</div>
</div>
</div>
<div style="margin:0 auto; width:300px; padding: 1px 0 50px 0; font-size: 25px;">
<a style="text-decoration: none;" href="#">
<h1 style="color: black;">The<u>League</u></h1>
</a>
</div>
</div>
<!-- <div>
<div style="text-align: center;">
<a style="text-decoration: none;" href="#">
<h1 id="main-title">The<u>League</u></h1>
</a>
</div>
</div> -->
<ul class="top-level-menu">
<li><i class="fa fa-home" style="font-size: 20px;"></i> Home</li>
<li>
<i class="fa fa-tag" style="font-size: 20px"></i> Shop All ▼
<ul class="second-level-menu">
<li>Jerseys</li>
<li>Hats</li>
<li>Gym Shorts</li>
</ul>
</li>
<li><i class="fa fa-flask" style="font-size: 20px;"></i> Customize</li>
<li>
<i class="fa fa-futbol-o" style="font-size: 20px;"></i> Teams ▼
<ul class="second-level-menu">
<li>
Soccer
<ul class="third-level-menu">
<li>Barcelona</li>
<li>PSG</li>
<li>Real Madrid</li>
</ul>
</li>
<li>
Basketball
<ul class="third-level-menu">
<li>Golden State Warriors</li>
<li>Celtics</li>
<li>Chicago Bulls</li>
</ul>
</li>
<li>
Football
<ul class="third-level-menu">
<li>New England Patriots</li>
<li>Ravens</li>
<li>Atlanta Falcons</li>
</ul>
</li>
</ul>
<li><i class="fa fa-envelope" aria-hidden="true" style="font-size: 20px;"></i> Contacts Us
</li>
</li>
</ul>
<div class="slideshow-container moving-images">
<div class="mySlides">
<img src="https://images.daznservices.com/di/library/sporting_news/a/fe/kobe-bryant-041315-getty-ftrjpg_hnmwtxmeqtvu1fyv5fnzn6abh.jpg?t=926331162&quality=100"
alt="kobe holding shirt" style="width:100%">
</div>
<div class="mySlides">
<img src="https://images.hdqwalls.com/download/lionel-messi-fc-art-1m-1366x768.jpg" style="width:100%">
<!-- <div class="text">Caption Two</div> -->
</div>
<div class="mySlides">
<img src="https://images.wallpapersden.com/image/download/tom-brady-new-england-patriots-football_21828_1366x768.jpg"
style="width:100%;">
<!-- <div class="text">Caption Three</div> -->
</div>
<div style="text-align: center;">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)"><strong>❮ Prev</strong>
</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)"><strong>Next ❯</strong>
</button>
</div>
</div>
<div style="text-align:center; margin: 10px;">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<!-- JavaScript -->
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 5000); // Change image every 2 seconds
}
const searchIcon = document.querySelector(".search-icon__wrapper");
searchIcon.addEventListener("click", e => searchIcon.parentElement.classList.toggle("open"))
</script>
<!-- End of JavaScript -->
<div style="margin: 30px;">
<hr>
</hr>
</div>
<br><br>
<h3 style="text-align: center;font-size: 30px; color: black;font-family:'Fjalla One', sans-serif; ;">Featured
Jerseys</h3><br><br><br>
<div class="container1">
<div class="gallery">
<img src="https://www.teamzo.com/images/re-2019-2020-barcelona-home-nike-shirt-kids-messi-10-1559836177.png"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Barcelona 2019: Messi Jersey </div>
</div>
<div class="gallery">
<img src="https://fanatics.frgimages.com/FFImage/thumb.aspx?i=/productimages/_1768000/altimages/FF_1768829ALT1_full.jpg&w=900"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Golden State Warriors 2019: StephCurry Jersey </div>
</div>
<div class="gallery">
<img src="https://images.footballfanatics.com/FFImage/thumb.aspx?i=/productimages/_3775000/altimages/ff_3775300-29e956db2213fbdbcf67alt1_full.jpg&w=325"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Canucks 2019: Customizable Jersey </div>
</div>
<div class="gallery">
<img src="https://contestimg.wish.com/api/webimage/5e86c1d100c605394a614f9c-large.jpg?cache_buster=71f3e987b756bb4df19be721d299a68b"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Patriots 2019: Tom Brady Jersey </div>
</div>
<div class="gallery">
<img src="https://fanatics.frgimages.com/FFImage/thumb.aspx?i=/productimages/_3609000/altimages/ff_3609123-ef2947d2ef78011fbfc1alt3_full.jpg&w=600"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> PSG 2019: Neymar Jersey </div>
</div>
<div class="gallery">
<img src="https://cdn.shopify.com/s/files/1/0271/0975/2920/products/thumb.jpg?v=1580412625"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Lakers 2019: Kobe Bryant Jersey </div>
</div>
</div>
<div style="margin: 30px;">
<hr>
</hr>
</div>
<div class="footer">
<div style="float: left; margin: 0 auto; padding: 0 0 0 40px;">
<p><strong>Find a Store</strong></p>
<p><strong>Sign Up For Email</strong></p>
<p><strong>Become A Member</strong></p>
<p><strong>Site Feedback</strong></p>
</div>
<div style="float:right; margin: 0 auto; width: 300px;">
<p>Get Help</p>
<p>Order Status</p>
<p>Shipping and Delivery</p>
<p>Returns</p>
<p>Payment Options</p>
<p>Contact Us</p>
</div>
<div style="margin:0 auto; width:200px; padding:4px 0 0 0;">
<strong>
<p>About The League</p>
</strong>
<p>News</p>
<p>Careers</p>
<p>Investors</p>
<p>Sustainability</p>
</div>
<div style="margin: 30px; color: white;"><br>
<hr>
</hr>
</div>
</div>
</main>
</body>
</html>

The problem seems to be the positioning of your container-top.
The position:Fixed effects the element in such a way that it follows the user's viewport. the position Absolute, on the other hand, takes the actual document into consideration.
Have a look at w3schools description here: https://www.w3schools.com/css/css_positioning.asp

You should define the position to absolute. Fixed means that it is always fixed to the same position on the screen, while absolute will force it to stay where it is in the element.

CSS Animation takes focus on Samsung s8

Currently I'm working on a site where I have a big infinite animation when the user enters the page. Now, on my computer(google chrome) and my phone(safari),
the animation looks fine and behaves correctly. However, when I tried to enter the site from my friend's Samsung Galaxy S8, the website start glitching.
The url for the site is: website
When I scroll the page down on Samsung Galaxy, the animation on the top always takes the focus, so it's impossible to scroll down to the rest of the page.
Here is my styles for the animation:
.static {
width: 100%;
height: 100%;
position: relative;
margin: 0;
padding: 0;
top: -100px;
opacity: 0.05;
z-index: 230;
user-select: none;
user-drag: none;
}
.error {
text-align: center;
font-size: 95px;
font-weight: 700;
font-style: italic;
text-align: center;
width: 100%;
height: 60px;
letter-spacing: 3px;
line-height: 60px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 30px;
animation: noise 2s linear infinite;
overflow: default;
}
.error::after {
content: 'Philanthropist';
font-size: 95px;
font-style: italic;
text-align: center;
width: 100%;
height: 60px;
line-height: 60px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
color: blue;
animation: noise-1 .2s linear infinite;
}
.error::before {
content: 'Philanthropist';
font-size: 95px;
font-style: italic;
text-align: center;
width: 100%;
height: 60px;
line-height: 60px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
color: red;
animation: noise-2 .2s linear infinite;
}
.info {
text-align: center;
font-size: 30px;
font-style: italic;
text-align: center;
height: 60px;
line-height: 60px;
margin: auto;
position: absolute;
top: 200px;
bottom: 0;
left: 0;
right: 0;
animation: noise-3 1s linear infinite;
}
#media (max-width: 900px) {
.error,
.error:after,
.error:before {
font-size: 50px;
padding-left: 40px;
}
.info {
top: 140px;
}
}
#media (max-width: 650px) {
.error,
.error::after,
.error::before {
font-size: 40px;
padding-left: 50px;
}
}
#media (max-width: 450px) {
.error,
.error::after,
.error::before {
font-size: 30px;
}
.error {
top: -60px;
}
.info {
font-size: 20px;
}
#logo-section {
.arrow {
margin-bottom: 40px;
}
}
}
#keyframes noise-1 {
0%,
20%,
40%,
60%,
70%,
90% {
opacity: 0;
}
10% {
opacity: .1;
}
50% {
opacity: .5;
left: -6px;
}
80% {
opacity: .3;
}
100% {
opacity: .6;
left: 2px;
}
}
#keyframes noise-2 {
0%,
20%,
40%,
60%,
70%,
90% {
opacity: 0;
}
10% {
opacity: .1;
}
50% {
opacity: .5;
left: 6px;
}
80% {
opacity: .3;
}
100% {
opacity: .6;
left: -2px;
}
}
#keyframes noise {
0%,
3%,
5%,
42%,
44%,
100% {
opacity: 1;
transform: scaleY(1);
}
4.3% {
opacity: 1;
transform: scaleY(1.7);
}
43% {
opacity: 1;
transform: scaleX(1.5);
}
}
#keyframes noise-3 {
0%,
3%,
5%,
42%,
44%,
100% {
opacity: 1;
transform: scaleY(1);
}
4.3% {
opacity: 1;
transform: scaleY(4);
}
43% {
opacity: 1;
transform: scaleX(10) rotate(60deg);
}
}
And here is the markup for the page:
<% include partials/header %>
<link rel="stylesheet" href="/css/aos.css" />
<link rel="stylesheet" href="/css/landing.css">
<section id="logo-section">
<div class="dark-overlay">
<div class="container h-100">
<div class="row h-100">
<div class="col d-flex flex-column justify-content-center text-center">
<div class="error">Philanthropist</div>
<br />
<br />
<span class="info">The Bedroom</span>
</div>
</div>
</div>
</div>
</section>
<section id="divider">
</section>
<!-- Music Section -->
<section id="music-section" class="py-5">
<div class="dark-overlay">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="display-4 text-center" data-aos-once="true" data-aos-delay="500" data-aos="fade-down" data-aos-duration="900">Music</h2>
<iframe data-aos-once="true" data-aos-delay="500" data-aos="fade-up" data-aos-duration="1100" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/30328335&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=false"
width="70%" data-embed="true" frameborder="no" height="450"></iframe>
</div>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section id="newsletter-section" class="text-dark">
<div class="container">
<div class="row">
<div class="col-md-5 d-flex flex-column mb-5 mx-auto">
<form action="/subscribe" method="POST">
<h3 class="mb-4 text-center mx-auto">Stay Tuned</h3>
<input type="text" class="form-control form-control-lg mb-3" name="name" placeholder="Name">
<input type="text" class="form-control form-control-lg mb-3" name="email" placeholder="Email">
<button class="btn btn-dark btn-lg btn-block">
Subscribe
</button>
</form>
</div>
<div class="col-md-5 mx-auto">
<h3 class="mb-4 text-center mx-auto">Follow</h3>
<div id="social-media" class="d-flex flex-row justify-content-center mb-0">
<a href="https://twitter.com/philanxy" class="mx-2 icon-button twitter" data-aos-delay="200" data-aos="fade-up" data-aos-duration="800"
data-aos-once="true" target="_blank">
<i class="fa fa-twitter icon-twitter"></i>
<span></span>
</a>
<a href="https://www.facebook.com/philanxyxy/" class="mx-2 icon-button facebook" data-aos-delay="200" data-aos="fade-down"
data-aos-duration="800" data-aos-once="true" target="_blank">
<i class="fa fa-facebook icon-facebook"></i>
<span></span>
</a>
<a href="https://soundcloud.com/philanxy" class="mx-2 icon-button soundcloud" data-aos-delay="200" data-aos="fade-up" data-aos-duration="800"
data-aos-once="true" target="_blank">
<i class="fa fa-soundcloud icon-soundcloud"></i>
<span></span>
</a>
<a href="https://philanthropist.bandcamp.com/" class="mx-2 icon-button bandcamp" data-aos-delay="200"
data-aos="fade-down" data-aos-duration="800" data-aos-once="true" target="_blank">
<i class="fa fa-bandcamp icon-bandcamp"></i>
<span></span>
</a>
</ul>
</div>
</div>
</div>
</section>
<% include partials/footer %>
<script type="text/javascript" src="/js/aos.js"></script>
<script type="text/javascript" src="/js/landing.js"></script>
<script type="text/javascript" src="/js/navbar-fixed.js"></script>
What could be causing this?

Overlap issue in html card

In my website, there are three columns using bootstrap which hold images. Each image has button center of the image. I have added a dialog which I want to show when a user clicks on a button in an image. But the dialog window explores on the backside of columns that is images. I want to show dialog over my contents on the whole page. Please, any one help me to fix this.
Here I have attached my codes
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" type = "text/css" href = "hover.css">
<link rel = "stylesheet" type = "text/css" href = "dialogue.css">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
margin:43px;
height:70%
}
.img {
height:350px;
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/7aam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text">
<span class="button fa fa-play fa-2x"></span>
<div>surya, shruti hasan</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/1000il.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Karthi, Andriya</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/NK.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Arya</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--row div-->
</br>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/bahu.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Prabas, Anushka</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/raam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Jeeva, Saranya</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/sivaji.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Rajini, Shreya</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--row div-->
</div> <!--container div-->
</body>
</html>
Dialogue.css
body {
font-family: Arial, sans-serif;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
Hover.css
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
preview on Plunker

Your problem is z-index issue just increase it for .overlay like below:
.overlay {
z-index: 999;
}
Here is a working JSfiddle.

Trying to toggle class on group of items for accordion style functionality but it's acting funny

I am trying to toggle a class on the wrapper of a header (that you click to drop the body) and the body. The class changes the visibility, opacity, and max-height of the body to create the drop down effect.
This first item is dropped down by default. When another is open, all currently open items should close.
instead, when I click on a closed one it opens all of them but and closes the first one that is open by default.
here is my code:
$(".template_wrap").first().addClass("open");
$('.templates').find('.template_header').click(function(){
$(this).drop();
$('.template_header').not($(this)).drop();
});
$.fn.drop = function() {
$(this).parent(".template_wrap").toggleClass('open');
};
.page_center {
margin: 0 auto;
float: none;
}
.page_center.large {
width: 95%;
}
.page_center.medium {
width: 85%;
max-width: 1350px;
}
.page_center.small {
width: 85%;
max-width: 1130px;
}
.page_center.x-small {
width: 75%;
max-width: 680px;
}
.page_center:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
* html .page_center { zoom: 1; } /* IE6 */
*:first-child+html .page_center { zoom: 1; } /* IE7 */
.template_wrap {
border: 1px solid #a32021;
width: 100%;
margin-bottom: 30px;
}
.template_header {
background: #a32021;
position: relative;
cursor: pointer;
padding: 1px 0 1px 2%;
}
.template_header:after {
position: absolute;
right: 2%;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 36px;
font-family:"FontAwesome";
content: "\f107";
transition: all 0.4s ease;
}
.template_wrap.open .template_header:after {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
transition: all 0.4s ease;
content: "\f106";
top: 30%;
}
.template_header h2 {
color: #fff;
margin: 0;
line-height: 65px;
font-weight: 400;
}
.template_body {
visibility: hidden;
opacity: 0;
max-height: 0;
transition: opacity .4s ease-out, visibility .4s, max-height: .8s;
}
.template_wrap.open .template_body {
visibility: visible;
opacity: 1;
max-height: 10000px;
transition: opacity .4s ease-out, visibility .4s, max-height: .8s;
padding: 2%;
}
.template_links {
width: 50%;
float: left;
}
.template_links_wrap {
border: 1px solid #f47628;
padding: 0;
margin: 0;
list-style: none;
}
.template_links_wrap li {
padding-left: 3%;
line-height: 52px;
}
.template_links_wrap li:nth-child(odd) {
background: #fbe4d6;
}
.template_links_wrap li a {
color: #f47628;
}
.template_img {
width: 50%;
float: right;
}
.template_img img {
margin: 0 auto;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="content templates">
<div class="page_center medium">
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF</li>
<li>Download PDF</li>
<li>Download PDF</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF</li>
<li>Download PDF</li>
<li>Download PDF</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF</li>
<li>Download PDF</li>
<li>Download PDF</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
</div>
</section>
Also, Something strange happens to the h2s where they move around based on various clicks. Any help would be appreciated.

This should do the trick:
$(".template_wrap").first().addClass("open");
$('.template_header').click(function(){
$('.template_wrap').removeClass("open");
$(this).parent().addClass("open");
})
Fiddle: https://jsfiddle.net/26kasg4t/

The trick here is to make all accordions close and then afterwards make this the only one open:
$('.template_wrap:first').addClass('open');
$('.template_header').click(function() {
if ($(this).parent().hasClass('open')) {
$('.template_wrap').removeClass('open');
$('.template_body').slideUp();
} else {
$('.template_wrap').removeClass('open');
$('.template_body').slideUp();
$(this).next('.template_body').slideDown();
$(this).parent().addClass('open');
}
});
Added a condition, should an accordion be open while it's clicked, it will just close.
SNIPPET
$('.template_wrap:first').addClass('open');
$('.template_header').click(function() {
if ($(this).parent().hasClass('open')) {
$('.template_wrap').removeClass('open');
$('.template_body').slideUp();
} else {
$('.template_wrap').removeClass('open');
$('.template_body').slideUp();
$(this).next('.template_body').slideDown();
$(this).parent().addClass('open');
}
});
.page_center {
margin: 0 auto;
float: none;
}
.page_center.large {
width: 95%;
}
.page_center.medium {
width: 85%;
max-width: 1350px;
}
.page_center.small {
width: 85%;
max-width: 1130px;
}
.page_center.x-small {
width: 75%;
max-width: 680px;
}
.page_center:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
* html .page_center {
zoom: 1;
}
/* IE6 */
*:first-child+html .page_center {
zoom: 1;
}
/* IE7 */
.template_wrap {
border: 1px solid #a32021;
width: 100%;
margin-bottom: 30px;
}
.template_header {
background: #a32021;
position: relative;
cursor: pointer;
padding: 1px 0 1px 2%;
}
.template_header:after {
position: absolute;
right: 2%;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 36px;
font-family: "FontAwesome";
content: "\f107";
transition: all 0.4s ease;
}
.template_wrap.open .template_header:after {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
transition: all 0.4s ease;
content: "\f106";
top: 30%;
}
.template_header h2 {
color: #fff;
margin: 0;
line-height: 65px;
font-weight: 400;
}
.template_body {
visibility: hidden;
opacity: 0;
max-height: 0;
transition: opacity .4s ease-out, visibility .4s, max-height: .8s;
}
.template_wrap.open .template_body {
visibility: visible;
opacity: 1;
max-height: 10000px;
transition: opacity .4s ease-out, visibility .4s, max-height: .8s;
padding: 2%;
}
.template_links {
width: 50%;
float: left;
}
.template_links_wrap {
border: 1px solid #f47628;
padding: 0;
margin: 0;
list-style: none;
}
.template_links_wrap li {
padding-left: 3%;
line-height: 52px;
}
.template_links_wrap li:nth-child(odd) {
background: #fbe4d6;
}
.template_links_wrap li a {
color: #f47628;
}
.template_img {
width: 50%;
float: right;
}
.template_img img {
margin: 0 auto;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="content templates">
<div class="page_center medium">
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF
</li>
<li>Download PDF
</li>
<li>Download PDF
</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF
</li>
<li>Download PDF
</li>
<li>Download PDF
</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF
</li>
<li>Download PDF
</li>
<li>Download PDF
</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
</div>
</section>

to make a div inside a div always in middle of the page

I am making a responsive gallery page but got stuck. All i want is to make my .gallery-container in middle in any width. There's a gap in right side which is not equal to left side. Is there any way to maintain the gap between left and right side equal so that the gallery div will be always in middle of the page in any width?
If there is, it will help me alot
heres my code
It's complicated because i have given width to image and without giving width i cant display bigger image while going to a link a. So, all i need is to make the half of the space of right side to left side also. I now figure out that's the work of js. If you can then do help me.
.sj-main-content-inner {
max-width: 100%;
display: block;
overflow: hidden;
min-height: 300px;
}
h1 {
font-size: 40px;
margin-bottom: 20px;
}
.gallery-container {
margin: 0;
}
ul {
list-style: square outside;
/* margin: 0 0 20px 20px; */
}
.gallery-list {
list-style: none;
float: left;
position: relative;
margin-right: 25px;
width: 360px;
border: 0;
}
li.gallery-list.col-lg-3.col-md-3.col-sm-6.col-xs-12:hover .gallery-title {
background: rgba(255,255,255,1);
}
.gallery-title {
position: absolute;
left: 50%;
bottom: 30px;
width: 302px;
margin-left: -151px;
text-align: center;
background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
border: 1px solid #fff;
padding: 20px 10px;
}
.gallery-title h3 {
font-size: 18px;
text-transform: none;
margin-bottom:20px;
}
.sj-read-more {
color: #000;
text-decoration: none;
text-transform: uppercase;
padding-bottom: 16px;
position: relative;
}
.sj-read-more:after {
content: '';
width: 60px;
height: 1px;
background: #a4a4a5;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 0;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
.sj-read-more:hover, .sj-read-more:focus, .sj-read-more:active {
color: #e45f4d;
text-decoration: none;
}
.sj-read-more:hover:after {
width: 100%;
left: 0;
margin-left: 0;
bottom: 15px;
color: #e45f4d;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="sj-main-container">
<div class="sj-main-content">
<div class="sj-main-content-inner">
<h1>Foto Gallery</h1>
<ul class="gallery-container">
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="http://upper.dev/swiss-japon/suissejapon110216/?gallery=fotos">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="clearfix"></div>

Use this code:
.sj-main-content-inner {
width: 100%;
margin: auto;
display: block;
overflow: hidden;
min-height: 300px;
}
h1 {
font-size: 40px;
margin-bottom: 20px;
}
.gallery-container {
max-width: 800px;
height:100%;
background: #000;
margin:auto;
}
ul {
list-style: square outside;
/* margin: 0 0 20px 20px; */
}
.gallery-list {
list-style: none;
position: relative;
width: 360px;
margin:auto;
border: 0;
}
li.gallery-list.col-lg-3.col-md-3.col-sm-6.col-xs-12:hover .gallery-title {
background: rgba(255,255,255,1);
}
.gallery-title {
position: absolute;
left: 50%;
bottom: 30px;
width: 302px;
margin-left: -151px;
text-align: center;
background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
border: 1px solid #fff;
padding: 20px 10px;
}
.gallery-title h3 {
font-size: 18px;
text-transform: none;
margin-bottom:20px;
}
.sj-read-more {
color: #000;
text-decoration: none;
text-transform: uppercase;
padding-bottom: 16px;
position: relative;
}
.sj-read-more:after {
content: '';
width: 60px;
height: 1px;
background: #a4a4a5;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 0;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
.sj-read-more:hover, .sj-read-more:focus, .sj-read-more:active {
color: #e45f4d;
text-decoration: none;
}
.sj-read-more:hover:after {
width: 100%;
left: 0;
margin-left: 0;
bottom: 15px;
color: #e45f4d;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
Now for making it responsive play with the values in his code and add it just where your CSS ends. For reference use this link
#media only screen and (max-width: 700px) {
.gallery-container{
width:500px;
margin:auto;
}
}
Whenever you have to position a body to the centre use this as a trick:
<selector>{
width:<x>px;
margin:auto;
}
You can specify the top and bottom margin using margin-top and margin-bottom below margin:auto; but once you use this you can not set margin-left or margin-right.(But then you won't be requiring margin let/right because you are positioning the div in centre).

Problem solved by using jquery
$(function() {
function updateDivPosition() {
var myWidth = $( '.gallery-title' ).width(), myHeight = $( '.gallery-title' ).height();
$( '.gallery-title' ).css( {
marginLeft: -( parseInt( myWidth, 10 ) / 2 ) + 'px',
marginTop: -( parseInt( myHeight, 10 ) / 2 ) + 'px'
});
}
updateDivPosition(); // first time set correct position on onload
$( window ).resize( updateDivPosition ); // update on window resize
});

Categories

Resources