0

.popup {
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #fff;
    display: flex;
    justify-content: center;
    transition: transform .25s ease-in-out;
}

.popup__inner {
    display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
    max-width: 520px;
    width: 100%;
    position: relative;
    z-index: 2;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 40px 65px;
    background-color: #051367;
}

.popup--active {
    transform: translateX(0);
}

.popup__title {
    font-size: 48px;
    line-height: 1.2;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 60px;
    font-weight: 900;
}

.popup__close {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 1;
    border: none;
    outline: none;
    background-color: transparent;
}

.popup__close:after,
.popup__close:before {
    content: '';
    position: absolute;
    top: 13px;
    left: 3px;
    width: 30px;
    height: 3px;
    background-color: #fff;
}

.popup__close:after {
    transform: rotate(45deg);
}

.popup__close:before {
    transform: rotate(-45deg);
}
<section class="popup popup--active">
  <div class="popup__inner">
    <button class="popup__close"></button>
    <p class="popup__title">drhrdjd?</p>
    <form action="" class="contacts__holder">
      <div class="contacts__box">
        <input type="text" class="input" placeholder="drjdr">
      </div>
      <div class="contacts__box">
        <input type="text" class="input" placeholder="drjdr">
      </div>
      <div class="contacts__box">
        <textarea class="area" placeholder="drjrd"></textarea>
      </div>
            <div class="contacts__box">
        <input type="text" class="input" placeholder="drjdr">
      </div>
      <div class="contacts__box">
        <input type="text" class="input" placeholder="drjdr">
      </div>
      <div class="contacts__box">
        <textarea class="area" placeholder="drjrd"></textarea>
      </div>
            <div class="contacts__box">
        <input type="text" class="input" placeholder="drjdr">
      </div>
      <div class="contacts__box">
        <input type="text" class="input" placeholder="drjdr">
      </div>
      <div class="contacts__box">
        <textarea class="area" placeholder="drjrd"></textarea>
      </div>
      <button class="btn">drjdrj</button>
    </form>
  </div>
</section>

на мельньких экранах обрезается попап. Из-за флекса .popup__inner Но убрать его там не могу. Нужно выровнять по центру блок.

1 ответ 1

0

Всё нормально отображается, просто на вашем jsbin "iframe" в котором отображается форма высота больше чем 100% окна, в котором отображается форма.

.popup {
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #fff;
    display: flex;
    justify-content: center;
    transition: transform .25s ease-in-out;
}

.popup__inner {
    display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
    max-width: 520px;
    width: 100%;
    position: relative;
    z-index: 2;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 40px 65px;
    background-color: #051367;
}

.popup--active {
    transform: translateX(0);
}

.popup__title {
    font-size: 22px;
    line-height: 1.2;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
  margin-top: 0;
}

.popup__close {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 1;
    border: none;
    outline: none;
    background-color: transparent;
}

.popup__close:after,
.popup__close:before {
    content: '';
    position: absolute;
    top: 13px;
    left: 3px;
    width: 30px;
    height: 3px;
    background-color: #fff;
}

.popup__close:after {
    transform: rotate(45deg);
}
<section class="popup popup--active">
        <div class="popup__inner">
            <button class="popup__close"></button>
            <p class="popup__title">drhrdjd?</p>
            <form action="" class="contacts__holder">
                <div class="contacts__box">
                    <input type="text" class="input" placeholder="drjdr">
                </div>
                <button class="btn">drjdrj</button>
            </form>
        </div>
    </section>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.