We Keep Coding

Why are these input and text parts on the right side, if they supposed to be on the center?

I have a problem whit my new project. A login system. I did it from a youtube video: https://youtu.be/cxm5bCCa9OA . Everything works perfectly, It just bothers me, that my text is right-sided instead of centered, but the YouTuber's text is fine. I think I have the same code. I think The problem might be with the form's border or the positioning of my Texts.
My Log in system:
The YouTuber's Log in system:
My code is also here:
.box {
top: 80px;
justify-content: center;
align-items: center;
position: relative;
width: 380px;
height: 420px;
background: #000000;
border-radius: 8px;
overflow: hidden;
}
.box::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
transform-origin: bottom right;
animation: animate 6s linear infinite;
}
.box::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
transform-origin: bottom right;
animation: animate 6s linear infinite;
animation-delay: -3s;
}
#keyframes animate {
/*colorwave line animation*/
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.form {
position: absolute;
inset: 3px;
border-radius: 8px;
background: #343745;
z-index: 10;
display: flex;
flex-direction: column;
}
.form h4 {
color: #7ed6df;
font-weight: 500;
text-align: center;
letter-spacing: 0.05em;
font-size: 3em;
font-style: italic;
}
.inputBox {
position: relative;
width: 300px;
margin-top: 35px;
}
.inputBox input {
position: relative;
width: 90%;
padding: 20px 10px 10px;
background: transparent;
border: none;
outline: none;
color: #535c68;
font-size: 0.5em;
letter-spacing: 0.06em;
z-index: 10;
}
.inputBox span {
position: absolute;
left: 0;
padding: 20px 0px 10px;
font-size: 0.7em;
color: #8f8f8f;
pointer-events: none;
letter-spacing: 0.03em;
}
.inputBox input:valid~span,
.inputBox input:focus~span {
color: #7ed6df;
transform: translateX(0px) translateY(-34px);
font-size: 0.7em
}
.inputBox i {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #7ed6df;
border-radius: 4px;
transition: 0.5s;
pointer-events: none;
z-index: 9;
}
.inputBox input:valid~i,
.inputBox input:focus~i {
height: 40px;
}
.loglinks {
display: flex;
justify-content: space-between;
}
.loglinks a {
margin: 15px;
font-size: 0.4em;
color: #8f8f8f;
text-decoration: none;
}
.loglinks a:hover,
.loglinks a:nth-child(2) {
color: #7ed6df;
}
input[type="submit"] {
border: none;
outline: none;
background: #7ed6df;
padding: 11px 25px;
width: 100px;
margin-top: 10px;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
}
input[type="submit"]:active {
opacity: 0.8;
}
<link href="https://fonts.googleapis.com/css2?family=Clicker+Script&family=IM+Fell+DW+Pica&family=Playfair+Display+SC:ital#1&family=Yeseva+One&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f90175d7f9.js" crossorigin="anonymous"></script>
<center>
<div class="box">
<div class="form">
<h4>Log In
<h4>
<div class="inputBox">
<input type="text" required="required">
<span>Username</span>
<i></i>
</div>
<div class="inputBox">
<input type="password" required="required">
<span>Password</span>
<i></i>
</div>
<div class="loglinks">
Forgot Password
Sign up
</div>
<input type="submit" value="Enter">
</div>
</div>
</center>

To center those inputs you may add a margin-left and a margin-right of auto to .inputBox. Or simply change this:
.inputBox {
position: relative;
width: 300px;
margin-top: 35px; /** change this */
}
into this:
.inputBox {
position: relative;
width: 300px;
margin: 35px auto 0; /** into that */
/**
* the above rule means:
* - 35px as margin top
* - left and right margins set to "auto" which horizontally centers your ".inputBox"
* - 0px as margin bottom
*/
}
And here's a live demo (made some changes to your code because you had some tags that were not closed)
.box {
top: 80px;
justify-content: center;
align-items: center;
position: relative;
width: 380px;
height: 420px;
background: #000000;
border-radius: 8px;
overflow: hidden;
}
.box::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
transform-origin: bottom right;
animation: animate 6s linear infinite;
}
.box::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
transform-origin: bottom right;
animation: animate 6s linear infinite;
animation-delay: -3s;
}
#keyframes animate {
/*colorwave line animation*/
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.form {
position: absolute;
inset: 3px;
border-radius: 8px;
background: #343745;
z-index: 10;
display: flex;
flex-direction: column;
}
.form h4 {
color: #7ed6df;
font-weight: 500;
text-align: center;
letter-spacing: 0.05em;
font-size: 3em;
font-style: italic;
}
.inputBox {
position: relative;
width: 300px;
margin: 35px auto 0;
}
.inputBox input {
position: relative;
width: 90%;
padding: 20px 10px 10px;
background: transparent;
border: none;
outline: none;
color: #535c68;
font-size: 0.5em;
letter-spacing: 0.06em;
z-index: 10;
}
.inputBox span {
position: absolute;
left: 0;
padding: 20px 0px 10px;
font-size: 0.7em;
color: #8f8f8f;
pointer-events: none;
letter-spacing: 0.03em;
}
.inputBox input:valid~span,
.inputBox input:focus~span {
color: #7ed6df;
transform: translateX(0px) translateY(-34px);
font-size: 0.7em
}
.inputBox i {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #7ed6df;
border-radius: 4px;
transition: 0.5s;
pointer-events: none;
z-index: 9;
}
.inputBox input:valid~i,
.inputBox input:focus~i {
height: 40px;
}
.loglinks {
display: flex;
justify-content: space-between;
}
.loglinks a {
margin: 15px;
font-size: 0.4em;
color: #8f8f8f;
text-decoration: none;
}
.loglinks a:hover,
.loglinks a:nth-child(2) {
color: #7ed6df;
}
input[type="submit"] {
border: none;
outline: none;
background: #7ed6df;
padding: 11px 25px;
width: 100px;
margin-top: 10px;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
}
input[type="submit"]:active {
opacity: 0.8;
}
<link href="https://fonts.googleapis.com/css2?family=Clicker+Script&family=IM+Fell+DW+Pica&family=Playfair+Display+SC:ital#1&family=Yeseva+One&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f90175d7f9.js" crossorigin="anonymous"></script>
<div class="box">
<div class="form">
<h4>Log In</h4>
<div class="inputBox">
<input type="text" required="required">
<span>Username</span>
<i></i>
</div>
<div class="inputBox">
<input type="password" required="required">
<span>Password</span>
<i></i>
</div>
<div class="loglinks">
Forgot Password
Sign up
</div>
<input type="submit" value="Enter">
</div>
</div>

Compared to the video, you are missing a padding: 50px 40px; in the .form part.
Try replacing your .form css with this:
.form {
position: absolute;
inset: 3px;
border-radius: 8px;
background: #343745;
z-index: 10;
padding: 50px 40px;
display: flex;
flex-direction: column;
}
UPDATE: furthermore, there is an issue with the <h4> tag which is opened twice. Maybe you should have <h4>Log In</h4>.

SweetAlert Icon overflow-y

I have an issue modifying my website. When I call Swal.fire(...), something like this happens:
Icon on the picture overflows and not renders properly(seems like scrollbar affects on icon render). How can I fix this? Thanks
Here is my custom css code:
* {
margin: 0px;
padding: 0px;
font-family: 'Roboto Mono', monospace;
overflow-x: hidden;
color: white;
user-select: none;
font-size: 20px;
}
h1 {
font-size: 60px;
}
body {
z-index: -2;
background-color: black;
}
#canvas1 {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
background: black;
}
.header {
text-align: center;
height: 100vh;
}
.header-title {
font-size: 70px;
font-weight: bold;
margin-top: 40vh;
}
section {
padding: 20vh;
}
.section-title {
font-size: 60px;
}
.section-text {
font-size: 25px;
}
footer {
height: 30vh;
background-color: rgb(24, 24, 24);
}
.navbar {
font-size: 40px;
position: fixed;
list-style-type: none;
overflow: hidden;
}
.navbar > li {
float: left;
}
.navbar > li a {
transition: .3s;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar > li a:hover {
background-color: rgba(255, 255, 255, 0.671);
}
input {
background-color: black;
margin: 20px;
}
.account-creator {
margin: auto;
width: 50%;
border: 3px solid white;
padding: 10px;
border-radius: 10px;
margin-top: 30vh;
padding: 10vh;
}
.account-creator {
margin-bottom: 100px;
}
.small-title {
font-size: 40px;
}
button {
background-color: black;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 35px;
overflow-y: hidden;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
top: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #f3214f;
}
input:focus + .slider {
box-shadow: 0 0 1px #f3214f;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.input_description{
font-size: 30px;
}
.simple-button {
background-color: #f3214f;
padding: 10px;
border-radius: 5px;
border: none;
transition: .4s;
margin: 30px;
}
.simple-button:hover {
transform: scale(1.2);
box-shadow: 0px 0px 10px #f3214faf;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-thumb {
background-image: linear-gradient(45deg, rgb(255, 115, 0) 0%, rgb(255, 0, 0) 100%);
border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
background-color: white;
background-image: none;
border-radius: 20px;
}
.clauses-field{
border: 3px solid white;
border-radius: 10px;
max-height: 300px;
position: absolute;
overflow-y: scroll;
margin-left: 40vw;
padding: 30px;
}
Idk maybe this code ruins everything, but it will be good if I don't need to change anything in here cause my website could just crash

For some resone you icon is overflowing so that orange line is scrollbar
add .sa-icon.sa-success { overflow:hidden }
this code in your css . if this dosent work , just inspect success icon and copy its class and add overflow:hidden to that.
if you still cant do it just copy popup code and add to your question , i will give you working code.

Issue with CSS Text box rendering in IE

I have been trying to build a search engine using basic HTML and CSS for my Uni but IE just doesnt seem to like text boxes. Works perfectly fine in Chrome and Edge but for some reason doesnt work well in IE.
Screenshots attached below.
Image in IE
Image in Chrome
Any help would be highly appreciated.
Code for the search box and the search text button:
.search-box {
position: absolute;
top: 260px;
left: 46%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-text {
width: 350px;
padding: 0 6px;
}
.search-box:hover > .search-btn {
background: white;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
}
/*
.search-box:hover ~ .category-box {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box:hover {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box {
position: absolute;
align-items: center;
top: 38%;
left: 50%;
text-decoration-color: white;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
width: 0px;
color: white;
visibility: collapse;
opacity: 0;
transition: width 1s, height 1s, transform 1s;
transition: opacity 1s;
}
*/
.search-box > ul {
left: -100px;
background-color: #2f3640;
color: white;
border-radius: 10px;
list-style-type: none;
font-size: 15px;
}
.search-box > ul li {
left: -10px;
margin: 0 0 10px 0;
border-bottom: 1px solid white;
z-index: 1;
}
.search-box > ul li:last-child {
margin: 0 0 10px 0;
border-bottom: 1px solid transparent;
}
.search-box > ul li:hover {
color: red;
}
<div class="entire-searchbox">
<div class="search-box">
<input class="search-text" type="text" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
<ul id="testListDummy">
</ul>
</div>
</div>

Can you set 400px in .search-box class should be work

Try to add the height property for the .search-text, code as below:
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
height:58px;
}
The output as below:

How can I make an image slider which makes image move right to left?

Hey guys I'm making an image slider on my website and I've got the main functionality down but I want there to be a transition where you see the next image being pulled into view instead of just appearing there. Kind of like the one on this site.
https://allisonstexasbbq.com/
Also here's a link to my website, the code posted below is incomplete because there's too much code to post here so here's my fiddle.
http://jsfiddle.net/0ekqLu4c/
p.s I also realized you can't see my images cause there saved to my machine. Unfortunately I don't know how to get around this.
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
/*HEADER*/
.logo {
text-transform: uppercase;
color: white;
font-family: 'Staatliches';
font-size: 10rem;
letter-spacing: 20px;
font-weight: bolder;
position: relative;
left: 800px;
top: 150px;
}
#header {
background: url('img/mex-9.jpg');
background-attachment: fixed;
background-size: cover;
width: 100vw;
height: 100vh;
}
.btn-1, .btn-2, .btn-3 {
background-color: white;
width: 62px;
margin-bottom: 9px;
height: 8px;
border-radius: 5px;
}
.btn-1 {
background-color: lightgreen;
position: relative;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes btn-1-animate {
from {width: 62px; left: 0px; top: 0px;}
to { top: 75px; left: -12px; width: 84px;}
}
#keyframes btn-1-reverse {
from {top: 75px; left: -12px; width: 84px;}
to {top: 0px; left: 0px; width: 62px;}
}
.btn-2 {
border-radius: none;
background-color: white;
position: relative;
animation-duration: 0.3s;
animation-fill-mode: forwards;
z-index: 1;
}
#keyframes btn-2-animate {
from {top: 0px; left: 0px; width: 62px}
to {top: 58px; left: 65px; width: 117px;}
}
#keyframes btn-2-reverse {
from {top: 58px; left: 65px; width: 117px;}
to {top: 0px; left: 0px; width: 62px;}
}
.btn-3 {
background-color: #ff4d4d;
position: relative;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes btn-3-animate {
from {top: 0px; left: 0px; width: 62px;}
to {top: 41px; left: 180px; width: 160px;}
}
#keyframes btn-3-reverse {
from {top: 41px; left: 180px; width: 160px;}
to {top: 0px; left: 0px; width: 62px;}
}
.side-menu, .nav-btn {
padding-top: 100px;
padding-left: 50px;
}
.nav-btn {
width: 70px;
position: fixed;
top: 5px;
z-index: 10;
}
#header ul {
border-radius: 10px;
margin: 0;
list-style-type: none;
background-color: white;
position: fixed;
top: 200px;
text-align: center;
box-shadow: -15px 0px lightgreen;
}
.side-menu {
position: relative;
left: -2370px;
transition: all 0.2s ease;
z-index: 1;
}
.fa-times {
position: fixed;
left: -380px;
top: 200px;
font-size: 2rem;
color: white;
transition: all 0.2s ease;
}
.fa-times:hover {
transform: scale(1.3);
cursor: pointer;
}
#header li a {
font-family: 'Kumar One Outline';
text-decoration: none;
font-size: 2.2rem;
padding: 15px;
color: grey;
margin-bottom: 15px;
}
#header li:hover {
transform: scale(1.15);
}
#header li {
margin: 15px;
padding-left: 10px;
padding-right: 50px;
transition: all 0.35s ease;
}
#header li a:hover {
cursor: pointer;
font-weight: bolder;
color: #96ea96;
}
#header p {
float: right;
font-weight: bold;
font-size: 3.2rem;
margin-top: -10px;
margin-right: 100px;
color: white;
font-family: 'Cedarville Cursive';
}
/*ABOUT*/
#about .container {
background-color: #339966;
width: 100vw;
overflow: auto;
padding-bottom: -400px;
}
#about h1 {
margin-top: 0;
font-family: 'Cedarville Cursive';
font-size: 3.5rem;
color: white;
text-align: center;
padding-top: 5px;
}
.line {
background-color: orange;
width: 0px;
height: 4px;
padding: 0;
border-radius: 5px;
text-align: center;
margin-left: 560px;
position: relative;
top: 90px;
transition: all 1s ease;
}
#about p {
font-family: 'Josefin Sans';
color: white;
font-size: 1.8rem;
width: 35%;
margin-left: 130px;
}
.image-slider {
background-color: grey;
background-image: url(img/f-0.jpeg);
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
width: 35%;
height: 250px;
margin-right: 160px;
padding-bottom: 100px;
position: relative;
top: -380px;
float: right;
}
.fa-caret-down {
color: white;
font-size: 4rem;
margin-top: 29%;
position: relative;
}
.left {
transform: rotate(90deg);
left: -40px;
}
.right {
float: right;
transform: rotate(-90deg);
left: 40px;
}
.left:hover, .right:hover {
cursor: pointer;
}
/*MENU*/
#menu .container {
background-color: #e6ac00;
width: 100vw;
margin-top: -330px;
clip-path: polygon(0% 0%, 100% 3%, 100% 100%, 0% 100%);
overflow: hidden;
}
.shape-wrap {
position: relative;
}
.shape-1 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #339966;
border-bottom: 25px solid transparent;
position: relative;
top: 50px;
left: -190px;
display: inline-block;
margin: 0;
}
.shape-2 {
height: 0;
border-top: 25px solid transparent;
border-right: 50px solid #26734d;
border-bottom: 25px solid transparent;
float: left;
position: relative;
top: 25px;
display: inline-block;
left: 10px;
}
.shape-3 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #40bf80;
border-bottom: 25px solid transparent;
position: relative;
left: -195px;
display: inline-block;
top: 25px;
}
.shape-4 {
height: 0;
border-top: 25px solid transparent;
border-right: 50px solid #26734d;
border-bottom: 25px solid transparent;
float: left;
position: relative;
left: -40px;
display: inline-block;
top: 85px;
}
.shape-5 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #339966;
border-bottom: 25px solid transparent;
position: relative;
left: -298px;
display: inline-block;
top: 110px;
}
.shape-6 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #339966;
border-bottom: 25px solid transparent;
position: relative;
top: 230px;
display: inline-block;
left: -351px;
}
.shape-7 {
height: 0;
border-top: 25px solid transparent;
border-right: 50px solid #26734d;
border-bottom: 25px solid transparent;
float: left;
position: relative;
left: -90px;
display: inline-block;
top: 265px;
}
.shape-8 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #339966;
border-bottom: 25px solid transparent;
position: relative;
top: 290px;
display: inline-block;
left: -405px;
}
.shape-9 {
height: 0;
border-top: 25px solid transparent;
border-right: 50px solid #26734d;
border-bottom: 25px solid transparent;
float: left;
position: relative;
left: -140px;
display: inline-block;
top: 325px;
}
.shape-10 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #40bf80;
border-bottom: 25px solid transparent;
position: relative;
left: -410px;
display: inline-block;
top: 325px;
}
#menu h1 {
font-size: 7rem;
color: white;
font-family: 'Cedarville Cursive';
margin-left: 220px;
position: relative;
top: -450px;
}
.line-2 {
background-color: #339966;
width: 0px;
height: 5px;
border-radius: 5px;
position: relative;
top: -600px;
left: 45px;
transition: all 1s ease;
}
.platter {
font-size: 2.3rem;
font-family: 'Cedarville Cursive';
color: #339966;
margin-left: 60px;
}
.platter-info {
font-size: 1.2rem;
font-family: 'Josefin Sans';
color: white;
margin-left: 120px;
margin-top: -50px;
margin-bottom: 30px;
}
.item {
font-family: 'Josefin Sans';
font-size: 1.3rem;
}
.price {
font-size: 1.3rem;
font-family: 'Josefin Sans';
display: block;
margin-left: 400px;
margin-bottom: -40px;
position: relative;
bottom: 40px;
}
.col-1 {
margin-left: 200px;
margin-top: 0px;
position: relative;
top: -550px;
}
.plat-4 {
position: relative;
left: 120px;
}
.plat-5 {
position: relative;
left: 75px;
}
.plat-6 {
position: relative;
left: 85px;
}
.info4tacos {
position: relative;
left: 70px;
margin-bottom: 35px;
}
.plat-7 {
position: relative;
left: 100px;
}
.plat-8 {
position: relative;
right: 50px;
}
.plat-9 {
position: relative;
left: 30px;
}
.info4breakfast {
position: relative;
left: 50px;
}
.col-2 {
float: right;
margin-top: -3185px;
margin-right: 200px;
}
.plat-2 {
position: relative;
left: 70px;
top: 15px;
}
.plat-3 {
position: relative;
left: 60px;
}
.right-border {
float: right;
transform: rotate(180deg);
position: relative;
top: 2400px;
right: 10px;
}
/*HOURS*/
#hours .container {
background-color: #339966;
width: 100vw;
position: relative;
margin-top: -470px;
clip-path: polygon(0% 4%, 5% 0%, 95% 0%, 100% 4%, 100% 100%, 0% 100%);
overflow: hidden;
}
#hours h1 {
text-align: center;
font-size: 4rem;
color: white;
font-family: 'Cedarville Cursive';
padding-bottom: 100px;
margin-top: 0px;
position: relative;
bottom: 80px;
}
.day, .hour {
text-align: center;
background-color: white;
font-size: 2.5rem;
color: #666;
padding-top: 10px;
margin-bottom: 10px;
width: 220px;
font-family: 'Josefin Sans';
border-right: 12px solid #40bf80;
}
.grid {
display: grid;
grid-template-columns: 270px 270px;
grid-auto-rows: 65px;
grid-gap: 15px;
position: relative;
left: 50%;
margin-left: -272.5px;
margin-top: -220px;
}
.move3 {
top: 85px;
}
.move10 {
position: relative;
top: 265px;
}
.rotate {
transform: rotate(180deg);
width: 600px;
}
.hours-line, .hours-line2 {
width: 500px;
height: 10px;
border-radius: 5px;
position: relative;
background-color: #ff4d4d;
top: -300px;
left: 30px;
}
.hours-line2 {
background-color: lightgreen;
left: 820px;
top: -305px;
}
.lom {
transform: rotate(-180deg);
}
/*CONTACT*/
.back-wrapper {
background-color: #595959;
width: 100vw;
height: 650px;
clip-path: polygon(0 0, 15% 15%, 85% 15%, 100% 0, 100% 100%, 0 100%);
margin-top: -100px;
overflow: hidden;
}
.contact-wrapper:before {
content: '';
background-color: #339966;
width: 250px;
height: 130px;
position: absolute;
left: 50%;
margin-left: -125px;
top: -91px;
clip-path: polygon(15% 1%, 85% 0, 100% 30%, 100% 70%, 85% 100%, 15% 100%, 0% 70%, 0% 30%);
}
.contact-wrapper:after {
content: '';
background-color: #339966;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
width: 65px;
height: 65px;
position: absolute;
top: 65px;
left: 50%;
margin-left: -32.5px;
}
.contact-wrapper {
display: flex;
justify-content: space-between;
background-color: #404040;
position: relative;
margin-top: -552px;
}
.loc, .con {
flex-basis: 48%;
}
.contact-wrapper h1 {
font-family: 'Cedarville Cursive';
color: white;
font-size: 5rem;
margin-bottom: 0;
margin-top: 0;
text-align: center;
}
.split {
background-color: orange;
width: 3px;
height: 300px;
position: relative;
top: 160px;
}
.upArrow {
font-size: 2.5rem;
color: #404040;
position: absolute;
z-index: 1;
left: 50%;
top: -55px;
margin-left: -20px;
cursor: pointer;
transition: all 0.2s ease;
}
.upArrow:hover {
transform: scale(1.25);
color: orange;
}
.to-top {
font-family: 'Josefin Sans';
color: #404004;
font-size: 2rem;
position: absolute;
left: 50%;
margin-left: -85px;
font-weight: bold;
}
.phone, .email {
color: white;
font-size: 1.7rem;
font-family: 'Josefin Sans';
text-align: center;
margin-top: 0;
margin-bottom: 0;
margin-left: 70px;
}
textarea {
outline: none;
background-color: #333;
border: none;
margin: 15px;
position: relative;
left: 50%;
margin-left: -158.75px;
color: white;
}
input {
margin: 20px;
font-size: 1.25rem;
position: relative;
left: -95px;
top: 10px;
background-color: grey;
border: none;
border-radius: 4px;
transition: all 0.2s ease;
}
input:hover {
cursor: pointer;
color: orange;
}
.review {
font-size: 1.5rem;
color: white;
font-family: 'Josefin Sans';
position: relative;
left: 170px;
top: -20px;
}
.fab {
font-size: 3.3rem;
margin-right: 15px;
position: relative;
left: 385px;
top: -85px;
}
.recker {
transform: rotate(90deg);
width: 300px;
height: 15px;
position: relative;
background-color: #595959;
left: 30px;
top: 120px;
border-radius: 10px;
}
.main {
width: 400px;
height: 20px;
position: relative;
background-color: #595959;
left: 80px;
top: 100px;
border-radius: 10px;
}
.rd {
transform: rotate(90deg);
width: 300px;
height: 10px;
position: relative;
background-color: #595959;
left: 280px;
top: 80px;
border-radius: 10px
}
.fa-map-pin {
font-size: 4rem;
color: orange;
position: relative;
left: 290px;
top: -35px;
}
.loc p {
position: relative;
color: white;
font-family: 'Josefin Sans';
}
.con-border, .loc-border {
position: absolute;
}
.loc-border {
transform: rotate(180deg);
}
/*FOOTER*/
#footer .container {
width: 100%;
background-color: #595959;
text-align: center;
position: relative;
margin-top: -54px;
margin-bottom: 0;
}
#footer h1 {
margin: 0;
font-family: 'Josefin Sans';
font-weight: bolder;
font-size: 1.5rem;
padding: 15px;
color: darkgrey;
}

Profile card going outside of the browser window

I want to achieve the mini profile view like in twitter. When we hover a user's name, his mini profile view is coming. But my problem it is going outside of the browser window. I need to adjust it according to the viewport. It should go outside of the window, it should adjust automatically.
it is coming this way
I need it this way
here is the code
<div class="popover__wrapper">
<a>Cyril</a>
<div class="push popover__content">
<div class="contact-card-user">
<div class="left-side">
<img src="../assets/img/profiles/male-user.jpg" alt="">
</div>
<div class="right-side">
<div class="details-wrapper">
<h3>Full Name </h3>
<div class="privilege">Administrator</div>
<div class="designation">Designer</div>
<div class="description">+973 1234 5678</div>
<div class="description">info#company.com</div>
</div>
</div>
</div>
</div>
<style>
.popover__wrapper {
position: relative;
margin-top: 0;
display: block;
cursor: pointer;
}
.popover__content {
opacity: 0;
visibility: hidden;
position: absolute;
left: 40px;
bottom: -90px;
transform: translate(0, 30px);
background-color: transparent;
padding: 0;
width: auto;
}
.popover__content:before {
position: absolute;
z-index: -1;
content: '';
left: -20px;
bottom: 100px;
border-style: solid;
border-width: 10px 10px 10px 10px;
border-color: transparent transparent transparent #a5053d;
transition-duration: 0.3s;
transition-property: transform;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.contact-card-user {
background: #fff;
display: flex;
width: max-content;
box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.05);
}
.contact-card-user .left-side {
margin-right: 20px;
width: 100%;
max-width: 200px;
}
.contact-card-user .left-side img {
width: 100%;
height: auto;
}
.contact-card-user .right-side {
padding-left: 3px;
padding-top: 5px;
padding-bottom: 10px;
padding-right: 25px;
width: 100%;
max-width: 260px;
}
.contact-card-user .details-wrapper {
text-align: left;
}
.contact-card-user .details-wrapper h3 {
color: #333;
font-size: 16px;
white-space: pre-wrap;
overflow: hidden;
margin-bottom: 1px;
line-height: normal;
}
.contact-card-user .details-wrapper .privilege {
display: inline-block;
color: #a5053c;
font-weight: 400;
font-size: 14px;
letter-spacing: 0.7px;
margin-bottom: 13px;
margin-top: 6px;
border-bottom: 1px solid #00a000;
}
.contact-card-user .details-wrapper .designation {
color: #333;
margin-bottom: 5px;
}
.contact-card-user .details-wrapper .description {
color: #9a9a9a;
font-size: 12px;
line-height: 17px;
}
.contact-card-user .details-wrapper .description {
color: #9a9a9a;
font-size: 12px;
line-height: 17px;
}
</style>
I think may be javascript can solve. Any help?
Thank you