css Question posted in
Some basic documentation can be found here.

Css – How to center iframe and make its full height visible and responsive

I have a page divided into two sections. The page is responsive in the way I want it to be. The problem is, as you can see, that the iframe is not displaying its full content – by cutting the height.

Any suggestions how to make it displayed in the center as it is at the moment but with full height shown?

.c-login__wrapper {
  justify-content: center;
  height: 100vh;
  display: flex;
  background-color: pink;
  padding: 5px;
}

.login-positioner {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  padding: 5px;
  width: 50%;
  height: 100%;
}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: red;
  padding: 5px;
}

.marketing-positioner {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aqua;
  padding: 5px;
  width: 50%;
  height: 100%;
}

.marketing {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: blue;
}
<html>

<body>
  <div class="c-login__wrapper">
    <div class="login-positioner">
      <div class="login">
        <form>
          <form action="/action_page.php">
            <label for="fname">First name:</label><br />
            <input type="text" id="fname" name="fname" value="John" /><br />
            <label for="lname">Last name:</label><br />
            <input
                type="text"
                id="lname"
                name="lname"
                value="Doe"
              /><br /><br />
            <input type="submit" value="Submit" />
          </form>
        </form>
      </div>
    </div>

    <div class="marketing-positioner">
      <div class="marketing">
        <!-- <iframe src="https://www.youtube.com/embed/dXBohfjc4WA" width="100%" height="100%" allowfullscreen frameborder="0"></iframe> -->
        <iframe
            src="https://yachting.volygroup.com/voly-projects-login-advert"
            width="100%"
            height="100%"
            frameborder="0"
            allowfullscreen
          ></iframe>
      </div>
    </div>
  </div>
</body>

</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    For those who may have the same problem in the future, here is the solution with only CSS.

    .c-login__wrapper {
  -webkit-box-pack: unset;
  -webkit-box-align: unset;
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: space-around;
}

.login-positioner {
  display: flex;
  flex-basis: 100%;
  justify-content: center;
  background-color: green;
}

.login {
  background-color: red;
  margin: 0;
  width: 200px;
}

.marketing-wrapper {
  align-items: center;
  background-color: aqua;
  height: 100%;
  display: flex;
  flex-basis: 100%;
  justify-content: center;
}

.marketing-positioner {
  // margin: 0 auto;
  height: 371px;
  width: 355px;
  background-color: yellow;
}

    And the working example https://codesandbox.io/p/sandbox/nervous-waterfall-gmgcvf?file=%2Fstyles.css%3A1%2C1-38%2C1


  2. 0

    The height of .marketing needs to be set to 100%

    With the current code the iframe is indeed going 100% height and width, but to the size of the .marketing div. If we increase its height to 100% it resolves this issue

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search