Trying to make this code responsive, centered and everything aligned.
Also, the curtain and youtube should be the exact same size.
This is the code I based it off of:
code: https://jsfiddle.net/0jtgab4w/
This is the code I am working on:
code: https://jsfiddle.net/dyaf7x1e/
<div class="outer">
<div class="tcell">
<div class="curtain-wrapper">
<div class="curtain-ratio-keeper">
<div class="container1">
<div class="container hide">
<div class="video-wrapper">
<div class="video-ratio-keeper">
<div class="video video-frame"></div>
</div>
</div>
</div>
<div class="door-left"></div>
<div class="door-right"></div>
<div class="jacket" title="Play">
<svg class="play" width="100%" height="100%" viewBox="0 0 64 64">
<path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
</svg></div>
</div>
</div>
</div>
</div>
</div>
I removed this from the code:
.container1.slide {
height: 100%;
overflow: hidden;
}
Also, something needs to be adjusted here because it is not lined up for some reason.
Maybe it is from a different part of the code, I’m not sure.
Why is the border sticking out when it opens, and, how do I fix that so it doesn’t?
Is something not aligned properly?
.door-left,
.door-right {
position: absolute;
height: 100%;
width: 50%;
top: 0%;
transition: all ease 8s;
border: 3px solid red;
}
Also, when it opens, red is still sticking out on the left side.
Also, can one border radius be used in the code instead of 4?
or, maybe it is not possible.
.door-left {
left: 0%;
background-color: rgb(91, 96, 106);
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
.door-right {
left: 50%;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
background-color: rgb(229, 211, 211);
}