Width / Height are off by 6px

I can’t get this code the same width/height

This one is off by 6px both width / height.

Code 1.)
783 x 438

As this one.

Code 2.)
789 x 444

What would I need to adjust in Code 1 so it’s the same width/height as Code 2?


Code 1.)
783 x 438
https://jsfiddle.net/jqkef76y/3/

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: 0 20px;
}

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

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

.video-frame {
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
}

.border {
  border-radius: 25px;
  border: 3px solid green;
  box-sizing: border-box;
}
<div class="outer">
  <div class="tcell">
    <div class="video-wrapper">
      <div class="ratio-keeper">
        <div class="jacket" title="Play">
        </div>
        <div class="wrap hide">
          <div class="video video-frame" data-id="M7lc1UVf-VE"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Code 2.)
789 x 444

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: 0 20px;
}

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

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

.video-frame {
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
}

.border {
  border-radius: 25px;
  border: 3px solid green;
  box-sizing: border-box;
}
<div class="outer">
  <div class="tcell">
    <div class="video-wrapper">
      <div class="ratio-keeper">
        <div class="video border video-frame" data-id="M7lc1UVf-VE"></div>
      </div>
    </div>
  </div>
</div>

Immediate response: Is 6 px really worth stressing that much over?
I feel like you’re overusing absolute positioning here.

That said, your positioning is changing because you’ve defined .video-frame to have a negative left, top, and a bigger width and height, than you have for .jacket.

1 Like

Yes as already mentioned above you don’t match the offset that you have in one and not the other.

You would need to add the offset and width that you had in the second example and apply it to .jacket and .wrap in the first example.

e.g.

.wrap,.jacket{
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
}
2 Likes

Wrap is still:
783 x 438

It never changed.

Was I supposed to do something else?

jacket:
789 x 444

.wrap,.jacket{
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
}

Yes you were supposed to look at the css and make those changes to the elements concerned.:slight_smile:

You stuck the rule I gave you before .wrap in the stylesheet so its value was over-written. Order of styles is important :wink:

2 Likes

This worked.

Towards the bottom then:

.wrap,.jacket{
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
}


.hide {
  display: none;
}

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