Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 1, 2022 at 6:19 am #1356991
    blaircomm1

    How do I unfix an iframe aspect ratio in Enfold. It is 16/9 and I can set the width, but the height remains proportionally same on all devices from phones to large desktops. I want the iframe to be 100% screen height no matter what screen it is on, and the width to be 90vw, which I can do. But the height shrinks the smaller the screen and nothing changes the aspecty ratio.

    I am embedding a scrolling web page in the iframe and it needs to stay at 100% screen height and let the width be responsive at 90vw. The content is responsive already, it’s just the iframe I cannot change the height aspect ratio of. Is this constrained by a container I can’t fin d?

    Is there a way to do this?

    This is what I have:

    .mfp-iframe-holder .mfp-content {
    height: 100%!important;
    width: 100%!important;
    max-width: 90vw!important;
    max-height: 100vh!important;
    min-height: 100vh!important;
    position:absolute;
    top:opx;
    left:0;
    right:0;
    iframe align:top
    margin: 0px;
    padding: 0px;
    overflow-y: auto;
    overflow-x: auto;
    scrolling=”auto
    }

    July 2, 2022 at 9:17 pm #1357091
    Mike

    Hey blaircomm1,
    Try targeting the mfp-iframe-scaler like this:

    .mfp-iframe-scaler {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
}
.mfp-iframe-holder .mfp-content {
    max-width: 90vw!important
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    July 5, 2022 at 11:00 pm #1357336
    blaircomm1

    Hi: Thanks for the help. I have deleted the “popup-enabler” script as it is n ow unecessaary with the iFrame working.

    I have modified the test page and CSS and it all seems to work across platforms and devices, however the close button has dissappeared. The “X” in the top right corner.

    https://dev.blaircomm.us/8-popuptest/

    I still cannot get it absolute top, but it’s so close I can live with it. I do need to have some kind of obvious close button for the iFrames.

      Can you tell me how to reactivate the close button?
      And how to style the weight and color of the “X”, or better if I can create a circled “X” to make it more obvious.

    Some of the CSS is probably superflous, but this works OK:

    mfp-iframe-scaler {
    width: 100% !important;
    max-width: 100% !important;
    height: 300vh !important;
    max-height: 100vh !important;

    }
    .mfp-iframe-holder .mfp-content {
    max-width:90vw !important;
    position:relative;
    iframe align: center !important;
    iframe align:top
    top:0px;
    bottom:opx;
    left:0;
    right:0;
    margin: 0px;
    padding: 0px;
    overflow-y: auto;
    overflow-x: auto;
    }

    .mfp-bg {
    background-color:#000000 !important;
    opacity: 0.1;
    }

    Thank you.

    — Michael

    July 6, 2022 at 1:17 am #1357337
    Mike

    Hi,
    Thanks for the feedback, try adding this css to move the close “X” down and to the left and add a circle around it:

    div.avia-popup .mfp-iframe-scaler .mfp-close {
    top: 43px;
    border: 1px solid #fff;
    right: 40px;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    July 6, 2022 at 9:48 pm #1357456
    blaircomm1

    That works nicely. Thank you ver much!

    July 7, 2022 at 12:32 am #1357469
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Unfix iframe aspect ratio’ is closed to new replies.