Responsive, centered and aligned

HTML & CSS
1

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);
}
2

Is the circle supposed to be centered? It is.

But that code sure looks bloated just to center something.

3

In reference to the left red border that is sticking out:

Maybe it is from a different part of the code that needs to be adjusted, 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?

4

The blue bordered box is overflow:hidden so you can’t place anything inside it and have it show on the border. You would need to place the left and right doors at -3px on each edge in order to cover the blue border but you’d have to remove the overflow:hidden from the blue bordered box in order for the red border to overlay it.

You should be able to place the overflow:hidden on the curtain-ratio keeper and then that will allow the red border to be placed on top of the blue border.

You will need to use co-ordinates for top and bottom rather than height as the height is no longer 100%. It is 100% + 6px.

Then when you slide it you need to use transform (as I already told you to do) because left:100% will not take into account the borders whereas translateX(-100%) will refer to the whole thing and will be smoother into the bargain.

Here is your whole css adjusted with those changes.

html,
body {
  height: 100%;
  background: #000000;
  padding: 0;
  margin: 0;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 100%;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 8px 8px;
}

.curtain-wrapper {
  min-width: 40%;
  max-width: 640px;
  margin: auto;

}

.curtain-ratio-keeper {
  position: relative;
  padding-top: 56.25%;
  overflow:hidden;
}



.container1 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: 3px solid blue;
  box-sizing: border-box;
  border-radius: 25px;
  /*overflow: hidden;*/
  background: green;
  
}

.container {

}

.video-wrapper {
  min-width: 40%;
  max-width: 640px;
  margin: auto;
}

.video-ratio-keeper {
  position: relative;
  padding-top: 56.25%;
}


.door-left,
.door-right {
  position: absolute;
  /*height: 100%;*/
  width: 50%;
  top: -3px;
  bottom:-3px;
  /*left:0%;*/
  transition: all ease 8s;
  border: 3px solid red;

}

.door-left {
  left:-3px;
  background-color: rgb(91, 96, 106);
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

.door-right {
 /* left: 50%;*/
  right:-3px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  background-color: rgb(229, 211, 211);
}

.container1.slide .door-left {
  /*left: -50%;*/
  transform:translateX(-100%);
}

.container1.slide .door-right {
 /* left: 100%;*/
   transform:translateX(100%);
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.jacket {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  margin: auto;
  cursor: pointer;
  border-radius: 25px;
}

.play {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  min-width: 70px;
  min-height: 70px;
  max-width: 30%;
  max-height: 30%;
  fill: red;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  cursor: pointer;
}

.hide {
  display: none;
}

Whether or not that causes issues elsewhere will need to be checked.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.