Footer should be at the bottom, content in the middle

HTML & CSS
1

https://jsfiddle.net/xaLsqfme/

The footer seems to be pushing the content to the top.

.my-footer {
    box-sizing: border-box;
    border-top: 1px solid #1155cc;
    background: #121212;
    text-align: center;
    word-wrap: break-word;
    margin: 0 -8px;
    padding: 22px 8px 8px;
    /*height:200px;
  padding: 22px 0 0 0;  height is used    */
    font-family: Verdana, Arial;
    font-size: 13.33px;
    line-height: 1.5;
    vertical-align: baseline;
}

.my-footer a {
    text-decoration: none;
}

.my-footer b {
    width: 1px;
    height: 12px;
    background-color: #f6b26b;
    position: relative;
    top: 4px;
    left: 0;
    margin: 0 7.4px;
}

.footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 13px;
}

.footer-top a {
    color: #0059dd;
    font-weight: 700;
}

.my-footer .text5 {
    color: #38761d;
    font-weight: 400;
}

.text6 {
    color: #b45f06;
    font-weight: 700;
}

.footer-mid {
    margin-bottom: 49px;
    color: #0059dd;
    font-family: Arial;
    font-size: 24px;
    font-weight: 700;
}

.footer-base {
    color: #0059dd;
    padding: 0 0 31px 0;
}

<div class="outer-container hide">

  <div class="containerB">
    <div class="modal-content">

      <div class="buttonContainerA">
        <button data-destination="#ba" class="playButton btn-primary btn">Listening</button>
        <button data-destination="#bb" class="playButton btn-primary btn">Live Performance</button>
        <button data-destination="#bc" class="playButton btn-primary btn">On Loop</button>
        <button data-destination="#bd" class="playButton btn-primary btn">Audio Visual</button>
        <button data-destination="#be" class="playButton btn-primary btn">Lyric Video</button>
        <button data-destination="#bf" class="playButton btn-primary btn">Music Video</button>
        <button data-destination="#bg" class="playButton btn-primary btn">From The Vault</button>
        <button data-destination="#bh" class="playButton btnq">
          <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 856 856">
            <path fill="#000" d="M 856 0 H 856 V 856 H 0 L 0 0 H 856" />
            <path fill="#1155cc" d="M79.4,816.3c-21,0-38-17-38-37.9c0-21.1,16.9-38.1,38-38.1c20.9,0,37.9,17,37.9,38.1
      C117.3,799.3,100.4,816.3,79.4,816.3" />
            <path fill="#1155cc" d="M79.4,115.7c-21,0-38-17-38-38s16.9-38,38-38c20.9,0,37.9,17,37.9,38S100.4,115.7,79.4,115.7" />
            <path fill="#1155cc" d="M513.6,766.6c0,0.8-0.8,1.5-1.6,1.5H344.2c-0.8,0-1.5-0.7-1.5-1.5V658.2c0-0.9,0.7-1.7,1.5-1.7H512
      c0.8,0,1.6,0.7,1.6,1.7V766.6z" />
            <path fill="#1155cc" d="M722,403.4c0,0.4-0.2,0.7-0.4,1.1l-75.2,76.4c-0.4,0.3-0.8,0.4-1.2,0.4H532.1l-18.5,18.5v96.9
      c0,1-0.8,1.7-1.6,1.7H344.2c-0.8,0-1.5-0.7-1.5-1.7V447.9c0-0.4,0.1-0.8,0.4-1.1l75.1-76.4c0.3-0.3,0.7-0.5,1.1-0.5h113.2
      l18.6-18.6V239.7l-18.6-18.6H323.6l-18.5,18.6v113.5c0,0.8-0.7,1.5-1.5,1.5H135.8c-1,0-1.6-0.7-1.6-1.5V190.8c0-0.3,0.2-0.7,0.4-1
      l77.1-79.6c0.3-0.3,0.7-0.4,1.2-0.4h430.5c0.4,0,0.8,0.2,1.2,0.4l76.9,79.6c0.2,0.2,0.4,0.7,0.4,1V403.4z" />
            <path fill="#1155cc" d="M776.9,816.3c-20.9,0-38.2-17-38.2-37.9c0-21.1,17.2-38.1,38.2-38.1c20.9,0,38,17,38,38.1
      C814.9,799.3,797.8,816.3,776.9,816.3" />
            <path fill="#1155cc" d="M776.9,115.7c-20.9,0-38.2-17-38-38s17.2-38,38.2-38c20.9,0,38,17,38,38S797.8,115.7,776.9,115.7" />
          </svg>

        </button>
        <button data-destination="#bi" class="playButton btn-primary btn">Cover</button>
        <button data-destination="#bj" class="playButton btn-primary btn">Remix</button>
        <button data-destination="#bk" class="playButton btn-primary btn">Instrumental</button>
        <button data-destination="#bl" class="playButton btn-primary btn">Extended Mix</button>
        <button data-destination="#bm" class="playButton btn-primary btn">Duet</button>
        <button data-destination="#bn" class="playButton btn-primary btn">Acoustic</button>
        <button data-destination="#bo" class="playButton btn-primary btn">Rework</button>
      </div>
      <button class="exitB exit" type="button" title="Exit" aria-label="Close"></button>
    </div>

    <div id="ba" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonA"></div>
          </div>
          <div class="buttonA"></div>
          <div class="curtainB"></div>
        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bb" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonB"></div>
          </div>
          <div class="buttonB"></div>
          <div class="curtainB"></div>
        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bc" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonC"></div>
          </div>

          <div class="buttonC"></div>
          <div class="curtainB"></div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bd" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonD"></div>
          </div>

          <div class="buttonD"></div>
          <div class="curtainB"> </div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="be" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonE"></div>
          </div>

          <div class="buttonE">

          </div>
          <div class="curtainB"></div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bf" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonF"></div>
          </div>

          <div class="buttonF"></div>
          <div class="curtainB"></div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bg" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonG"></div>
          </div>

          <div class="buttonG"></div>
          <div class="curtainB"></div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bh" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonH"></div>
          </div>

          <div class="buttonH"></div>
          <div class="curtainB"></div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bi" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonI"></div>
          </div>

          <div class="buttonI"></div>
          <div class="curtainB"></div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bj" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonJ"></div>
          </div>

          <div class="buttonJ"></div>
          <div class="curtainB"> </div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bk" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonK"></div>
          </div>

          <div class="buttonK"></div>
          <div class="curtainB"></div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bl" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonL"></div>
          </div>

          <div class="buttonL"></div>
          <div class="curtainB"></div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bm" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonM"></div>
          </div>

          <div class="buttonM"></div>
          <div class="curtainB"></div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bn" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonN"></div>
          </div>

          <div class="buttonN"></div>
          <div class="curtainB"></div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bo" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonO"></div>
          </div>

          <div class="buttonO"></div>
          <div class="curtainB"></div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>
  </div>





  <div class="containerC hide">
    <div class="buttonContainerB"></div>

    <div class="exitF">
      <a href="" title="Exit" aria-label="Close"></a>
    </div>


  </div>



  <footer class="my-footer">
    <div class="footer-top">
      <a href=" #" target="_blank">something</a><b></b>
      <a href="#" target="_blank">something</a><b></b>
      <a href="#" target="_blank"><span class="text5">something</span><span class="text6">something</span></a><b></b>

      <a href="#" target="_blank">Feedback</a>
    </div>
    <div class="footer-mid">something</div>
    <div class="footer-base">something</div>
  </footer>
</div>

765×687 18.8 KB

2

No, it seems everything is at the top?

If you delete the footer the content is still at the top.

There is nothing on .outer-container that will center anything there. If you wanted the whole thing cenbtred then you’d need to apply styles like this to outer-container.

    display: flex;
    min-height: 100vh;
    justify-content: center;
    flex-direction: column;

Of course that will center the footer along with the container.

If you wanted the footer at the bottom you would need margin-top:auto on the footer and then margin-top:auto on containerB but that would only center container B in the remaining space and not the viewport.

Its not possible to have containerB centred in the viewport if the footer takes up room on the page. You could absolutely place the footer but then on small height screens it would overlap.

5

Content is in the middle, footer is now stuck at the top:

https://jsfiddle.net/xpa472tf/

.containerB {
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 8px 8px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    /* Enable scroll if needed */
}

Now the footer is stuck in the middle: https://jsfiddle.net/c5huaepx/2/

With an added scrollbar, I don’t know why though.

.outer-container{
      display: flex;
    min-height: 100vh;
    justify-content: center;
    flex-direction: column;
    
}

.containerB {
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 8px 8px;
    position: fixed;
    
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    /* Enable scroll if needed */
}

6

Of course it is. You just removed the whole middle section from thew flow of the page using position:fixed. Therefore the footer sits at the top because there is nothing there.

I already explained the method to get the footer at the bottom and the caveats of doing so.

In your last example you could position:fixed the footer at the bottom but as the screen gets smaller they will both overlap again.

The only usable solution is the flex solution I already gave you (or a similar grid version). There is no automatic way in CSS to say “center this one element in the viewport regardless of whats there but then don’t overlap anything else that may be there”. What you would have to do is place something above the middle section that is the same size as the footer and then you start getting into magic numbers and then forcing a min-height on your user to show it all.

2 Likes
8

I also notice that you have 50px top padding on the body so you would need to remove that on the blue button screen if you were using flex.

I would do something like this:

body:has(.outer-container:not(.hide)){
  padding-top:0;
}
.outer-container{
   display: flex;
    min-height:100vh;
    justify-content: center;
    flex-direction: column;
}
.containerB,
.my-footer {margin-top:auto;}

Which will look like this:

jsfiddle.net_xaLsqfme_
jsfiddle.net_xaLsqfme_639×830 11.7 KB

1 Like
9

I did it: https://jsfiddle.net/o6b97ycm/2/

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #121212;
  padding: 0 8px 0;
}

body:has(.outer-container:not(.hide)) {
  padding-top: 0;
}

.outer-container {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  flex-direction: column;
}

.containerB,
.my-footer {
  margin-top: auto;
}

.containerB {
  /*display: flex;
    justify-content: center;
    align-content: center;
    padding: 8px 8px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;*/
  /* Enable scroll if needed */
  display: flex;
  min-height: 100vh;
  justify-content: center;
  flex-direction: column;
  margin-top: auto;
}
10

That is odd, I put the code into jsitor:

I thought the style was removed from the button?

These don’t stay saved: https://jsitor.com/C2grJR5da5

If you can test it before it gets removed.

Maybe their coding site is not up to date?

I am not sure.

.btnq {
    -webkit-appearance: none;
    appearance: none;
    height: 80px;
    width: 80px;
    padding: 0;
    color: inherit;
    border: none;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    margin: auto;
}

11

How would this be fixed? https://jsfiddle.net/o6b97ycm/2/

Why is this even occurring?

Those 3 footer lines are showing through the modal videos.

.my-footer b {
    width: 1px;
    height: 12px;
    background-color: #f6b26b;
    position: relative;
    top: 4px;
    left: 0;
    margin: 0 7.4px;
}

Even though there is a background behind the video.

.inner-modal::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: #0a0a0a;
    border: 1px solid;
    border-color: #000 #101010 #000 #101010;
}

Also, if you notice, while modal is open, I am able to scroll,

I would want to disable that, right?

I am still able to do that with this code, or does it need to be rewritten?

12

That’s because the background of .modal is transparent. Change it to a solid color and you won’t see the items underneath.

13

If I use this it is hidden:

<b>|</b>

.my-footer b {
  /*width: 1px;
    height: 12px;/
    background-color: #f6b26b;
    /*position: relative;
    top: 4px;
    left: 0;(*/
  color: #f6b26b;
  font-weight: 400;
  margin: 0 7.4px;
}

Would I be able to easily add back in,

When modal is open,

disable this or something to that effect?

 /*width: 1px;
    height: 12px;
    background-color: #f6b26b;
    /*position: relative;
    top: 4px;
    left: 0;(*/

solid modal background: https://jsfiddle.net/ubf1z08t/4/

Still showing through:


This is what I can do now:

I added open to it, or maybe I am doing this wrong:

   <div class="containerB open">
        <div class="modal-content">

Does an id have to be added to it?

<div id="myModal" class="modalA open">

When open was being used the last time I was not using buttons,

So, I would be able to do this then?

.containerB.open{

}

I think this would be to remove scrolling when modal is open?

body:has(.modal.open) {
  overflow: hidden;
}

Fixed:

Like this:

<div id="ba" class="modal open">

Question 2)

This automatically hides the footer also:

https://jsfiddle.net/ubf1z08t/11/

Whether modal is open or not.

body:has(.modal.open) {
  overflow: hidden;
}



.modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  transform: translate(0, -25%);
  opacity: 0;
  pointer-events: none;
  /*z-index: -99;*/
  overflow: auto;
  border-radius: 50%;
}
14

I gave you the answer. The fact you can see it is because there’s nothing on top hiding it simply give the modal a solid background to hide it. It’s not only the footer you can see as if you scroll you can see other stuff as well.

15

solid modal background: https://jsfiddle.net/ubf1z08t/4/

Still showing through:

red

.modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  transform: translate(0, -25%);
  opacity: 0;
  pointer-events: none;
  /*z-index: -99;*/
  overflow: auto;
  border-radius: 50%;
  background:red;
}

I tried this: maybe I am doing it wrong?

https://jsfiddle.net/2zf9hmt1/2/

body:has(.modal.open) {
  /* Add opacity: 0; to .my-footer b */
  .my-footer b {
   opacity: 0;
  }
}

Is there a right way to do this? https://jsfiddle.net/x2hrywLa/1/

.modal.active .my-footer b {
  opacity: 0;
}

This is giving me an error for reasons unbeknown to me:

https://jsfiddle.net/kac1pxw7/1/

modal.querySelector(".my-footer").classList.add("hide");

modal.querySelector(".my-footer").classList.remove("hide");

<footer class="my-footer hide">

.my-footer.hide {
  display: none;
}

Cannot read properties of null (reading ‘classList’) at line 188 col 38

Cannot read properties of null (reading ‘classList’) at line 276 col 38

See Here:

Fixed: https://jsfiddle.net/dz9pwght/1/

document.querySelector(".my-footer").classList.add("hide");

I seemed to have unknowingly done two things here:

I removed the footer while modal is open while also keeping transparent.

Also, scrolling is disabled while modal videos are open.

Because the footer is not there.

Could this have been done without adding?

This:

document.querySelector(".my-footer").classList.add("hide");

document.querySelector(".my-footer").classList.remove("hide");

I was not able to figure out how to:

I probably don’t know how to do this the right way:

body:has(.modal.open) {
  overflow: hidden;
}

Because, what that seemed to have did was, it automatically removed the footer from the page without me telling it to, whether modal was open or not.

About those 3 background lines, I had wanted to target them and give them opacity: 0; when modal is open, but I was able to figure that out.

This worked to target the element, but doing this I think makes no sense:

 const elements = document.querySelectorAll(".my-footer b");
elements.forEach(function(element) {
  element.classList.add("hide");
});
16

Do you know why this is, and, is there a way to use position on the background lines where they won’t appear through anything?

using either:

transform: translateY(4px);

or:

https://jsfiddle.net/o63yLbar/

position: relative;
    top: 4px;
    left: 0;

Inside here:

.my-footer b {
  width: 1px;
  height: 12px;
  background-color: #f6b26b;
  margin: 0 7.4px;
}

Causes the background lines to be visible through the iframe video:


17

modal.active should have a high z-index added. It should have a negative z-index in its normal .modal state but on modal.active you want a high z-index.

1 Like
18

That fixes that, but what about.

Preventing scrolling while modal is active?

I can’t do this: https://jsfiddle.net/b51jqt0d/6/

.modal.active {
  /* display: flex;*/
  opacity: 1;
  transform: scale(1);
  z-index: 1000;
  pointer-events: initial;
  border-radius: 0;
  overflow: hidden;
}

The whole thing is not viewable:

I can’t scroll down.

I am leaning towards this being the best option:

document.querySelector(".my-footer").classList.add("hide");

https://jsfiddle.net/Ldkvw3ou/1/

It works well.

When overflow;hidden is applied,

It should behave like this:


Where everything is still viewable.

It doesn’t seem to be working that way though.

Unless there is a way for that to be fixed or adjusted.

19

You’ve hidden the overflow on the modal which you means you can’t scroll it. If you put the overflow back on you can scroll the modal instead of what’s underneath,

.modal.active {;
    overflow: auto;
}

We have discussed this issue many times now. If you have stuff outside the viewport and you want to see it then you must scroll to it.

20

But now the background is scrollable again: https://jsfiddle.net/o6me7tbw/

I am still able to scroll what is underneath it here:

1067×326 192 KB

It should work the same way as how the first video is viewable:

No side scrollbar:

1175×478 139 KB

21

We’re going around in circles again. I already gave you code some time ago to stop the page scrolling when a modal was open but you never seemed to use it.

Having multiple scrollbars is bad UI so maybe you need to rethink what you are doing.

22

It was this, right?

  body:has(.modal.open) {
    overflow: hidden;
  }

But I don’t know how I would implement it here: https://jsfiddle.net/o6me7tbw/

Because it is a different modal code.

It was never implemented on the code that uses buttons.

Was the example you gave: Post# 6

But the other code uses buttons, so I do not know how it would be done on there.

Modal code that uses buttons:

css

.containerB {
  /*display: flex;
    justify-content: center;
    align-content: center;
    padding: 8px 8px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;*/
  /* Enable scroll if needed */
  display: flex;
  min-height: 100vh;
  justify-content: center;
  flex-direction: column;
  margin-top: auto;

}

.modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  transform: translate(0, -25%);
  opacity: 0;
  pointer-events: none;
  z-index: -99;
  overflow: auto;
  border-radius: 50%;
}

.modal.active {
  /* display: flex;*/
  opacity: 1;
  transform: scale(1);
  z-index: 1000;
  pointer-events: initial;
  border-radius: 0;
   overflow: auto;
}

html

 <div class="containerB">
    <div class="modal-content">

      <div class="buttonContainerA">
        <button data-destination="#ba" class="playButtonA btn-primary btn">Listening</button>
        <button data-destination="#bb" class="playButtonA btn-primary btn">Live Performance</button>
        <button data-destination="#bc" class="playButtonA btn-primary btn">On Loop</button>
        <button data-destination="#bd" class="playButtonA btn-primary btn">Audio Visual</button>
        <button data-destination="#be" class="playButtonA btn-primary btn">Lyric Video</button>
        <button data-destination="#bf" class="playButtonA btn-primary btn">Music Video</button>
        <button data-destination="#bg" class="playButtonA btn-primary btn">From The Vault</button>
        <button data-destination="#bh" class="playButtonA btnq">
          <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 856 856">
            <path fill="#000" d="M 856 0 H 856 V 856 H 0 L 0 0 H 856" />
            <path fill="#1155cc" d="M79.4,816.3c-21,0-38-17-38-37.9c0-21.1,16.9-38.1,38-38.1c20.9,0,37.9,17,37.9,38.1
      C117.3,799.3,100.4,816.3,79.4,816.3" />
            <path fill="#1155cc" d="M79.4,115.7c-21,0-38-17-38-38s16.9-38,38-38c20.9,0,37.9,17,37.9,38S100.4,115.7,79.4,115.7" />
            <path fill="#1155cc" d="M513.6,766.6c0,0.8-0.8,1.5-1.6,1.5H344.2c-0.8,0-1.5-0.7-1.5-1.5V658.2c0-0.9,0.7-1.7,1.5-1.7H512
      c0.8,0,1.6,0.7,1.6,1.7V766.6z" />
            <path fill="#1155cc" d="M722,403.4c0,0.4-0.2,0.7-0.4,1.1l-75.2,76.4c-0.4,0.3-0.8,0.4-1.2,0.4H532.1l-18.5,18.5v96.9
      c0,1-0.8,1.7-1.6,1.7H344.2c-0.8,0-1.5-0.7-1.5-1.7V447.9c0-0.4,0.1-0.8,0.4-1.1l75.1-76.4c0.3-0.3,0.7-0.5,1.1-0.5h113.2
      l18.6-18.6V239.7l-18.6-18.6H323.6l-18.5,18.6v113.5c0,0.8-0.7,1.5-1.5,1.5H135.8c-1,0-1.6-0.7-1.6-1.5V190.8c0-0.3,0.2-0.7,0.4-1
      l77.1-79.6c0.3-0.3,0.7-0.4,1.2-0.4h430.5c0.4,0,0.8,0.2,1.2,0.4l76.9,79.6c0.2,0.2,0.4,0.7,0.4,1V403.4z" />
            <path fill="#1155cc" d="M776.9,816.3c-20.9,0-38.2-17-38.2-37.9c0-21.1,17.2-38.1,38.2-38.1c20.9,0,38,17,38,38.1
      C814.9,799.3,797.8,816.3,776.9,816.3" />
            <path fill="#1155cc" d="M776.9,115.7c-20.9,0-38.2-17-38-38s17.2-38,38.2-38c20.9,0,38,17,38,38S797.8,115.7,776.9,115.7" />
          </svg>

        </button>
        <button data-destination="#bi" class="playButtonA btn-primary btn">Cover</button>
        <button data-destination="#bj" class="playButtonA btn-primary btn">Remix</button>
        <button data-destination="#bk" class="playButtonA btn-primary btn">Instrumental</button>
        <button data-destination="#bl" class="playButtonA btn-primary btn">Extended Mix</button>
        <button data-destination="#bm" class="playButtonA btn-primary btn">Duet</button>
        <button data-destination="#bn" class="playButtonA btn-primary btn">Acoustic</button>
        <button data-destination="#bo" class="playButtonA btn-primary btn">Rework</button>
      </div>
      <button class="exitB exit" type="button" title="Exit" aria-label="Close"></button>
    </div>

    <div id="ba" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonA"></div>
          </div>
          <div class="buttonA"></div>
          <div class="curtainB"></div>
        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bb" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonB"></div>
          </div>
          <div class="buttonB"></div>
          <div class="curtainB"></div>
        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bc" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonC"></div>
          </div>

          <div class="buttonC"></div>
          <div class="curtainB"></div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bd" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonD"></div>
          </div>

          <div class="buttonD"></div>
          <div class="curtainB"> </div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="be" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonE"></div>
          </div>

          <div class="buttonE">

          </div>
          <div class="curtainB"></div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bf" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonF"></div>
          </div>

          <div class="buttonF"></div>
          <div class="curtainB"></div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bg" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonG"></div>
          </div>

          <div class="buttonG"></div>
          <div class="curtainB"></div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bh" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonH"></div>
          </div>

          <div class="buttonH"></div>
          <div class="curtainB"></div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bi" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonI"></div>
          </div>

          <div class="buttonI"></div>
          <div class="curtainB"></div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bj" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonJ"></div>
          </div>

          <div class="buttonJ"></div>
          <div class="curtainB"> </div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bk" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonK"></div>
          </div>

          <div class="buttonK"></div>
          <div class="curtainB"></div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bl" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonL"></div>
          </div>

          <div class="buttonL"></div>
          <div class="curtainB"></div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bm" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonM"></div>
          </div>

          <div class="buttonM"></div>
          <div class="curtainB"></div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bn" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonN"></div>
          </div>

          <div class="buttonN"></div>
          <div class="curtainB"></div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>

    <div id="bo" class="modal">
      <div class="inner-modal">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonO"></div>
          </div>

          <div class="buttonO"></div>
          <div class="curtainB"></div>

        </div>
        <button class="close exit">&times</button>
      </div>
    </div>
  </div>
23

You are using a class called .active in that modal (not .open) so just change the open to active.

e.g.

  body:has(.modal.active) {
    overflow: hidden;
  }
1 Like