Develop Reference

Alignment of element in HTML/CSS

I have the following code:
scroll {
left: 50%;
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
}
<scroll style="width: 2em; height: 2em; background-color: transparent; z-index: 80;
bottom: 25px; border-width: 0 0.25em 0.25em 0; border-style: solid; border-color: black; position: absolute; animation: scrolldown1 1.2s ease-in-out infinite 0.15s;"></scroll>
<scroll style="width: 2em; height: 2em; background-color: transparent; z-index: 80;
bottom: 40px; position: absolute; border-width: 0 0.25em 0.25em 0; border-style: solid; border-color: black; animation: scrolldown1 1.2s ease-in-out infinite;"></scroll>
This is basically a scroll button and on my end the output is looking like this:
As you can see the alignment of the scroll button is slightly off and I would like it to be right on top of the MY STORY text or be centered. How would I achieve this task?
The code of the MY STORY text is as follows:
section {
padding: 60px 0;
overflow: hidden;
}
.section-title {
text-align: center;
padding-bottom: 30px;
}
.section-title h2 {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
color: #45505b;
}
.section-title h2::before {
content: '';
position: absolute;
display: block;
width: 120px;
height: 1px;
background: #ddd;
bottom: 1px;
left: calc(50% - 60px);
}
.section-title h2::after {
content: '';
position: absolute;
display: block;
width: 40px;
height: 3px;
background: #0563bb;
bottom: 0;
left: calc(50% - 20px);
}
<div class="section-title">
<h2>My Story</h2>
</div>
How would I achieve this task?
Basically, the scroll button should be right on top of the text

Notice that your .section-title's pseudo-elements have their left property set using calc and taking into account half of each element's width:
.section-title h2::before {
...
width: 120px;
...
left: calc(50% - 60px);
}
.section-title h2::after {
...
width: 40px;
...
left: calc(50% - 20px);
}
But the left property in your scroll declaration does not use calc. Therefore one possible fix would be to use it. Since each scroll element has a width of 2em, half of it would be 1em. So:
scroll {
/* left: 50%; */ /* remove this line */
left: calc(50% - 1em); /* add this line */
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
See demo below.
#container {
position: relative;
height: 5em;
}
scroll {
/* left: 50%; */ /* remove this line */
left: calc(50% - 1em); /* add this line */
transform: translateY(0%) rotate(45deg);
opacity: 0;
}
.first-scroll {
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 25px;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
position: absolute;
animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}
.second-scroll {
width: 2em;
height: 2em;
background-color: transparent;
z-index: 80;
bottom: 40px;
position: absolute;
border-width: 0 0.25em 0.25em 0;
border-style: solid;
border-color: black;
animation: scrolldown1 1.2s ease-in-out infinite;
}
#keyframes scrolldown1 {
0% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
50% {
transform: translateY(0%) rotate(45deg);
opacity: 0.2;
}
100% {
transform: translateY(20%) rotate(45deg);
opacity: 0.7;
}
}
section {
padding: 60px 0;
overflow: hidden;
}
.section-title {
text-align: center;
padding-bottom: 30px;
}
.section-title h2 {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
color: #45505b;
}
.section-title h2::before {
content: '';
position: absolute;
display: block;
width: 120px;
height: 1px;
background: #ddd;
bottom: 1px;
left: calc(50% - 60px);
}
.section-title h2::after {
content: '';
position: absolute;
display: block;
width: 40px;
height: 3px;
background: #0563bb;
bottom: 0;
left: calc(50% - 20px);
}
<div id="container">
<scroll class="first-scroll"></scroll>
<scroll class="second-scroll"></scroll>
</div>
<div class="section-title">
<h2>My Story</h2>
</div>
PS.: Unless you're using this positioned layout for browser compatibility reasons, you probably should consider using more modern layout modules, such as flexbox or grid, your life would be much easier.

How Do I make A Function To Check If an animation passes a certain point

Ok so I know the title is nonsense buT how do i check if the obstacle passes a certain point and active a function because of It?
Here is my code so far
function jump() {
jumpDetect = false;
document.getElementById("body").classList.toggle("body");
document.getElementById("beak").classList.toggle("beak");
document.getElementById("eyes").classList.toggle("eyes");
document.getElementById("pupils").classList.toggle("pupils");
document.getElementById("tail").classList.toggle("tail");
document.getElementById("snood").classList.toggle("snood");
document.getElementById("legRight").classList.toggle("legRight");
document.getElementById("legLeft").classList.toggle("legLeft");
setTimeout(() => {
document.getElementById("body").classList.toggle("body");
document.getElementById("beak").classList.toggle("beak");
document.getElementById("eyes").classList.toggle("eyes");
document.getElementById("pupils").classList.toggle("pupils");
document.getElementById("tail").classList.toggle("tail");
document.getElementById("snood").classList.toggle("snood");
document.getElementById("legRight").classList.toggle("legRight");
document.getElementById("legLeft").classList.toggle("legLeft");
}, 0);
winDetection();
}
function winDetection() {
jumpDetect = true;
console.log(jumpDetect)
}
.body {
padding: 30px 30px;
height: 35px;
width: 5px;
border-radius: 50%;
background-color: brown;
position: relative;
top: 0px;
animation-name: turkey;
animation-duration: 1s;
}
.beak {
padding: 1px 1px;
width: 1px;
height: 1px;
border-top: 10px solid transparent;
border-left: 25px solid #ffc800;
border-bottom: 5px solid transparent;
position: relative;
left: 40px;
top: 40px;
animation-name: beak;
animation-duration: 1s;
}
.eyes {
padding: 10px 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: white;
position: relative;
top: -80px;
animation-name: eyes;
animation-duration: 1s;
}
.pupils {
padding: 5px 5px;
width: 3px;
height: 3px;
border-radius: 50%;
background-color: black;
position: relative;
top: -100px;
animation-name: pupils;
animation-duration: 1s;
}
.snood {
padding: 5px 5px;
width: 1px;
height: 10px;
background-color: red;
border-radius: 50%;
position: relative;
top: -254px;
right: -38px;
animation-name: snood;
animation-duration: 1s;
}
.legRight {
padding: 10px 1px;
width: 1px;
height: 5px;
background-color: black;
position: relative;
top: -219px;
right: 9px;
transform: rotate(30deg);
animation-name: legRight;
animation-duration: 1s;
}
.legLeft {
padding: 10px 1px;
width: 1px;
height: 5px;
background-color: black;
position: relative;
top: -242px;
left: 3px;
transform: rotate(30deg);
animation-name: legLeft;
animation-duration: 1s;
}
.obstacle {
height: 100px;
width: 10px;
background-color: black;
animation: obstacle 3s infinite;
position: relative;
top: -460px;
}
body {
background-color: lightblue;
}
<html>
<head>
</head>
<body>
<center>
<br><br><br><br><br><br>
<div class="turkey">
<div id="beak" class="turkey beak"></div>
<div id="body" class="turkey body"></div>
<div id="eyes" class="turkey eyes"></div>
<div id="pupils" class="turkey pupils"></div>
<style>
.tail {
width: 20px;
height: 150px;
border-radius: 50%;
background-color: brown;
position: relative;
top: -200px;
right: 59px;
transform: rotate(-30deg);
animation-name: tail;
animation-duration: 1s;
}
</style>
<div id="tail" class="turkey tail" id="tailId"></div>
<div id="snood" class="turkey snood"></div>
<div id="legRight" class="turkey legRight"></div>
<div id="legLeft" class="turkey legLeft"></div>
</div>
<style>
#keyframes turkey {
0% {
top: 0px;
}
50% {
top: -200px;
}
100% {
top: 0px;
}
}
#keyframes beak {
0% {
top: 40px;
}
50% {
top: -160px;
}
100% {
top: 40px;
}
}
#keyframes eyes {
0% {
top: -80px;
}
50% {
top: -280px;
}
100% {
top: -80px;
}
}
#keyframes pupils {
0% {
top: -100px;
}
50% {
top: -300px;
}
100% {
top: -100px
}
}
#keyframes snood {
0% {
top: -254px;
}
50% {
top: -450px;
}
100% {
top: -254px;
}
}
#keyframes legRight {
0% {
top: -219px;
}
50% {
top: -419px;
}
100% {
top: -219px;
}
}
#keyframes legLeft {
0% {
top: -242px;
}
50% {
top: -442px;
}
100% {
top: -242px;
}
}
#keyframes tail {
0% {
top: -200px;
}
50% {
top: -400px;
}
100% {
top: -200px;
}
}
</style>
<style>
.button {
height: 100px;
width: 100px;
background-color: red;
border-radius: 50%;
position: relative;
top: -210px;
overflow=scroll;
}
</style>
<div class="button" onclick="jump()">
<h1>JUMP</h1>
</div>
<div class="obstacle"></div>
<style>
#keyframes obstacle {
from {
left: 1000px;
}
to {
left: -870px;
}
}
</style>
</center>
</body>
</html>
Btw a snood is the turkey's thing under its beak. So to restate the question, How do i detect if the obstacle passes the turkey and see if the turkey jumps or not? Thanks

How do I Make The Turkey jump On Click

I have scoured the web and all the sources that I have stumbled upon havent worked in my case. I need the turkey to jump when i click the red circle. Here is My code. Btw it is in js html and css.
function animate() {
document.getElementById("body").class = "bodyAnim";
document.getElementById("beak").class = "beakAnim";
document.getElementById("eyes").class = "eyesAnim";
document.getElementById("pupils").class = "pupilsAnim";
document.getElementById("tail").class = "tailAnim";
document.getElementById("snood").class = "snoodAnim";
document.getElementById("legRight").class = "legRightAnim";
document.getElementById("legLeft").class = "legLeftAnim";
}
.body {
padding: 30px 30px;
height: 35px;
width: 5px;
border-radius: 50%;
background-color: brown;
position: relative;
top: 0px;
animation-name: turkey;
animation-duration: 1s;
}
.beak {
padding: 1px 1px;
width: 1px;
height: 1px;
border-top: 10px solid transparent;
border-left: 25px solid #ffc800;
border-bottom: 5px solid transparent;
position: relative;
left: 40px;
top: 40px;
animation-name: beak;
animation-duration: 1s;
}
.eyes {
padding: 10px 10px;
width: 10px;
height:10px;
border-radius: 50%;
background-color: white;
position: relative;
top: -80px;
animation-name: eyes;
animation-duration: 1s;
}
.pupils {
padding: 5px 5px;
width: 3px;
height: 3px;
border-radius: 50%;
background-color:black;
position: relative;
top:-100px;
animation-name: pupils;
animation-duration: 1s;
}
.snood {
padding: 5px 5px;
width: 1px;
height: 10px;
background-color: red;
border-radius: 50%;
position: relative;
top: -254px;
right: -38px;
animation-name: snood;
animation-duration: 1s;
}
.legRight {
padding: 10px 1px;
width: 1px;
height: 5px;
background-color: black;
position: relative;
top: -219px;
right: 9px;
transform: rotate(30deg);
animation-name: legRight;
animation-duration: 1s;
}
.legLeft {
padding: 10px 1px;
width: 1px;
height: 5px;
background-color: black;
position: relative;
top: -242px;
left: 3px;
transform: rotate(30deg);
animation-name: legLeft;
animation-duration: 1s;
}
.obstacle {
height: 100px;
width: 10px;
background-color: black;
animation: obstacle 2.2s infinite;
position: relative;
top: -460px;
}
body {
background-color: lightblue;
}
<center>
<br><br><br><br><br><br>
<div class="turkey">
<tr>
<td>
<div class="turkey beak"></div>
</td>
<td>
<div class="turkey body"></div>
</td>
</tr>
<div class="turkey eyes"></div>
<div class="turkey pupils"></div>
<style>
.tail {
width: 20px;
height: 150px;
border-radius: 50%;
background-color: brown;
position: relative;
top: -200px;
right: 59px;
transform: rotate(-30deg);
animation-name: tail;
animation-duration: 1s;
}
</style>
<div class="turkey tail" id="tailId"></div>
<div class="turkey snood"></div>
<div class="turkey legRight"></div>
<div class="turkey legLeft"></div>
</div>
<style>
#keyframes turkey {
0% {
top: 0px;
}
50% {
top: -200px;
}
100% {
top: 0px;
}
}
#keyframes beak {
0% {
top: 40px;
}
50% {
top: -160px;
}
100% {
top: 40px;
}
}
#keyframes eyes {
0% {
top: -80px;
}
50% {
top: -280px;
}
100% {
top: -80px;
}
}
#keyframes pupils {
0% {
top: -100px;
}
50% {
top: -300px;
}
100% {
top: -100px
}
}
#keyframes snood {
0% {
top: -250px;
}
50% {
top: -450px;
}
100% {
top: -250px;
}
}
#keyframes legRight {
0% {
top: -219px;
}
50% {
top: -419px;
}
100% {
top: -219px;
}
}
#keyframes legLeft {
0% {
top: -242px;
}
50% {
top: -442px;
}
100% {
top: -242px;
}
}
#keyframes tail {
0% {
top: -200px;
}
50% {
top: -400px;
}
100% {
top: -200px;
}
}
</style>
<style>
.button {
height: 100px;
width: 100px;
background-color: red;
border-radius: 50%;
position: relative;
top:-210px;
overflow = scroll;
}
</style>
<div class="button" onclick="animate()"><h1>JUMP</h1></div>
<div class="obstacle"></div>
<style>
#keyframes obstacle {
from {
left: 370px;
}
to {
left: -870px;
}
}
</style>
So to restate my question, How do I make the turkey jump on the click. so in more of technical terms how do i activate the keyframes with an onclick.
Finally if My code Looks weird, please tell me. Everyone has been saying, fix your code but I do not know how.

Ok, so I'm not proud of what I've done, but I changed up a couple necessary things (like adding id properties and renaming the function) and then wrapped classList.toggle in a setTimeout and it worked. LOL. Please understand that this is all really a bad way to make a Turkey jump, but for the purposes of your question, I got the code to work.
<html>
<head>
<style>
.body {
padding: 30px 30px;
height: 35px;
width: 5px;
border-radius: 50%;
background-color: brown;
position: relative;
top: 0px;
animation-name: turkey;
animation-duration: 1s;
}
.beak {
padding: 1px 1px;
width: 1px;
height: 1px;
border-top: 10px solid transparent;
border-left: 25px solid #ffc800;
border-bottom: 5px solid transparent;
position: relative;
left: 40px;
top: 40px;
animation-name: beak;
animation-duration: 1s;
}
.eyes {
padding: 10px 10px;
width: 10px;
height:10px;
border-radius: 50%;
background-color: white;
position: relative;
top: -80px;
animation-name: eyes;
animation-duration: 1s;
}
.pupils {
padding: 5px 5px;
width: 3px;
height: 3px;
border-radius: 50%;
background-color:black;
position: relative;
top:-100px;
animation-name: pupils;
animation-duration: 1s;
}
.snood {
padding: 5px 5px;
width: 1px;
height: 10px;
background-color: red;
border-radius: 50%;
position: relative;
top: -254px;
right: -38px;
animation-name: snood;
animation-duration: 1s;
}
.legRight {
padding: 10px 1px;
width: 1px;
height: 5px;
background-color: black;
position: relative;
top: -219px;
right: 9px;
transform: rotate(30deg);
animation-name: legRight;
animation-duration: 1s;
}
.legLeft {
padding: 10px 1px;
width: 1px;
height: 5px;
background-color: black;
position: relative;
top: -242px;
left: 3px;
transform: rotate(30deg);
animation-name: legLeft;
animation-duration: 1s;
}
.obstacle {
height: 100px;
width: 10px;
background-color: black;
animation: obstacle 2.2s infinite;
position: relative;
top: -460px;
}
body {
background-color: lightblue;
}
</style>
</head>
<body>
<center>
<br><br><br><br><br><br>
<div class="turkey">
<div id="beak" class="turkey beak"></div>
<div id="body" class="turkey body"></div>
<div id="eyes" class="turkey eyes"></div>
<div id="pupils" class="turkey pupils"></div>
<style>
.tail {
width: 20px;
height: 150px;
border-radius: 50%;
background-color: brown;
position: relative;
top: -200px;
right: 59px;
transform: rotate(-30deg);
animation-name: tail;
animation-duration: 1s;
}
</style>
<div id="tail" class="turkey tail" id="tailId"></div>
<div id="snood" class="turkey snood"></div>
<div id="legRight" class="turkey legRight"></div>
<div id="legLeft" class="turkey legLeft"></div>
</div>
<style>
#keyframes turkey {
0% {
top: 0px;
}
50% {
top: -200px;
}
100% {
top: 0px;
}
}
#keyframes beak {
0% {
top: 40px;
}
50% {
top: -160px;
}
100% {
top: 40px;
}
}
#keyframes eyes {
0% {
top: -80px;
}
50% {
top: -280px;
}
100% {
top: -80px;
}
}
#keyframes pupils {
0% {
top: -100px;
}
50% {
top: -300px;
}
100% {
top: -100px
}
}
#keyframes snood {
0% {
top: -250px;
}
50% {
top: -450px;
}
100% {
top: -250px;
}
}
#keyframes legRight {
0% {
top: -219px;
}
50% {
top: -419px;
}
100% {
top: -219px;
}
}
#keyframes legLeft {
0% {
top: -242px;
}
50% {
top: -442px;
}
100% {
top: -242px;
}
}
#keyframes tail {
0% {
top: -200px;
}
50% {
top: -400px;
}
100% {
top: -200px;
}
}
</style>
<style>
.button {
height: 100px;
width: 100px;
background-color: red;
border-radius: 50%;
position: relative;
top:-210px;
overflow = scroll;
}
</style>
<div class="button" onclick="jump()">
<h1>JUMP</h1>
</div>
<div class="obstacle"></div>
<style>
#keyframes obstacle {
from {
left: 370px;
}
to {
left: -870px;
}
}
</style>
</center>
<script type="text/javascript">
function jump() {
document.getElementById("body").classList.toggle("body");
document.getElementById("beak").classList.toggle("beak");
document.getElementById("eyes").classList.toggle("eyes");
document.getElementById("pupils").classList.toggle("pupils");
document.getElementById("tail").classList.toggle("tail");
document.getElementById("snood").classList.toggle("snood");
document.getElementById("legRight").classList.toggle("legRight");
document.getElementById("legLeft").classList.toggle("legLeft");
setTimeout(() => {
document.getElementById("body").classList.toggle("body");
document.getElementById("beak").classList.toggle("beak");
document.getElementById("eyes").classList.toggle("eyes");
document.getElementById("pupils").classList.toggle("pupils");
document.getElementById("tail").classList.toggle("tail");
document.getElementById("snood").classList.toggle("snood");
document.getElementById("legRight").classList.toggle("legRight");
document.getElementById("legLeft").classList.toggle("legLeft");
}, 0)
}
</script>
</body>
</html>

cannot restart the css animation onclick in chrome

I have search on the topic about restarting animation and that can be done by remove and add class again. But when I test it myself with the same method, I found that it doesn't work in many browsers. It only work in Edge. Is there something I did wrong?
here is the html:
function(elem) {
elem.classList.remove("animation");
setTimeout(function(){
elem.classList.add("animation");
elem.style.animationName = "transformOuter";
elem.style.webkitAnimationName = "transformOuter";},1)
}
div.wrapperL {
float: left;
width: 40px;
height: 38px;
background: rgb(255, 255, 255);
position: relative;
border: 1px solid white;
margin: 0 1px 5px 0;
}
div.wrapperLeft {
width: 40px;
height: 38px;
background: white;
position: relative;
border: 1px solid lightgrey;
}
div.animation {
-webkit-animation-name: none;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: 1;
animation-name: none;
animation-duration: 5s;
animation-iteration-count: 1;
}
#-webkit-keyframes transformOuter {
0% {background-color: #FFFFFF; width: 40px; height: 38px; left: 0px; top: 0px; z-index: 10;}
40% {width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px;}
60% {width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px; transform: rotateY(0deg); }
100% {width: 0px; height: 0px; left: 20px; top: 19px; background-color: #FFFFFF; transform: rotateY(360deg); z-index: 0; font-size: 0px;}
}
<div class = "wrapperL">
<div class= "wrapperLeft" onclick = functionAnime(this)></div>
</div>
I also have another keyframe without -webkit- but same thing inside.The animation do trigger once in chrome but when I click again, nothings happen.

You have to remove style as well same as you did with class see working example: And yes your function name was incorrect I assumed it was a typo.
function functionAnime(elem) {
elem.classList.remove("animation");
elem.style = '';
setTimeout(function(){
elem.classList.add("animation");
elem.style.animationName = "transformOuter";
elem.style.webkitAnimationName = "transformOuter";
},100)
}
div.wrapperL{
float: left ;
width: 40px;
height: 38px;
background: rgb(255, 255, 255);
position: relative;
border: 1px solid white;
margin: 0 1px 5px 0;}
div.wrapperLeft{
width: 40px;
height: 38px;
background: white;
position: relative;
border: 1px solid lightgrey; }
div.animation{
-webkit-animation-name: none;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: 1;
animation-name: none;
animation-duration: 5s;
animation-iteration-count: 1;}
#-webkit-keyframes transformOuter{
0% { background-color: #FFFFFF; width: 40px; height: 38px; left: 0px; top: 0px; z-index: 10;}
40% { width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px;}
60% { width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px; transform: rotateY(0deg); }
100% { width: 0px; height: 0px; left: 20px; top: 19px; background-color: #FFFFFF; transform: rotateY(360deg); z-index: 0; font-size: 0px;}}
<div class = "wrapperL">
<div class= "wrapperLeft animation" onclick = functionAnime(this)></div>
</div>

Responsive left sidebar open close

I have one question about responsive left sidebar open close function.
I have created this DEMO from codepen.io
You can see in the demo there is a button (Click to show blue div). When you click this button then blue div will open from left side. It is ok but if you change your browser width < 800px then the .left div will displayed. After than if you click again (Click to show blue div) the blue div not opening, also at the same time if you change your browser width>880px then you can see the blue div still be opened because you clicked it before.
I want to make it when browser width<880px and when i click the (Click to show blue div) then i want to show blue div from left side.
How can i do that anyone can help me in this regard ?
HTML
<div class="test_container">
<div class="left">
<div class="left_in">Here is a some text</div>
<div class="problem-div">
<div class="proglem-div-in">
<!--Here is a some menu-->
</div>
</div>
</div>
<div class="gb" data-id="1" data-state="close">Click To Show Blue Div</div>
<div class="right">
<div class="bb"></div>
</div>
</div>
CSS
.test_container {
display: block;
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
max-width: 980px;
min-width: 300px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
background-color: #000;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
min-height: 140px;
}
.left {
display: block;
position: absolute;
float: left;
width: 30%;
overflow: hidden;
padding: 0px;
bottom: 0;
top: 0;
left: 0;
background-color: red;
border-right: 1px solid #d8dbdf;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
}
.left_in {
z-index: 999 !important;
position: absolute;
float: left;
width: 100%;
height: 100%;
background-color: red;
opacity: 0;
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: slideLeft;
animation-name: slideLeft;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
#-webkit-keyframes slideLeft {
0% {
-webkit-transform: translateX(25rem);
transform: translateX(25rem);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
#keyframes slideLeft {
0% {
-webkit-transform: translateX(15rem);
transform: translateX(15rem);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
.aa {
background-color: #f7f7f7;
/*background-color: #dfdfdf;
background-image: -webkit-linear-gradient(top,#dddbd1,#d2dbdc);
background-image: linear-gradient(top,#dddbd1,#d2dbdc);*/
width: 0;
top: 0;
border-radius: 0%;
z-index: 1000;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
overflow: hidden;
position: absolute;
left: 0;
}
.click_open_close {
right: 0px;
padding: 10px;
color: #fff;
position: absolute;
background-color: green;
cursor: pointer;
z-index: 999;
display: none;
}
.pp {
right: 0px;
padding: 10px;
color: #fff;
position: absolute;
background-color: green;
cursor: pointer;
}
.right {
display: block;
position: absolute;
width: 70%;
bottom: 0;
top: 0;
right: 0%;
background-color: pink;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.gb {
cursor: pointer;
position: absolute;
left: 30%;
padding: 10px;
color: #fff;
background-color: black;
z-index: 9999;
}
.problem-div {
z-index: 999 !important;
position: absolute;
float: left;
width: 0%;
height: 100%;
background-color: blue;
opacity: 0;
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: slideLeft;
animation-name: slideLeft;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
#media all and (max-width: 840px) {
.left {
left: -60%;
z-index: 9999999999999 !important;
}
.secret {
float: left;
display: block;
}
.right {
width: 100%;
}
.click_open_close {
display: block;
}
}
JS
$(".gb").on('click', function() {
var id = $(this).data("id");
var state = $(this).data("state");
if (state === "close") {
$(this).data("state", 'open');
$(".problem-div").animate({
width: "100%"
}, 200).find(".proglem-div-in").animate({
width: "100%"
}, 200);
} else {
$(this).data("state", 'close');
$(".problem-div").animate({
width: "0%"
}, 200).find(".proglem-div-in").animate({
width: "0%"
}, 200);
}
});

The problem is with CSS, replace media query css with this CSS:
#media all and (max-width: 840px) {
.left {
z-index: 9999999999999 !important;
}
.secret {
float: left;
display: block;
}
.click_open_close {
display: block;
}
}