CSS позиция относительно div не реагирует - PullRequest
Новая
       8

CSS позиция относительно div не реагирует

0 голосов
/ 30 июня 2019

Здравствуйте, у меня есть фон, к которому я хочу добавить div, как на этой картинке. Я использую Bulma CSS Framework enter image description here Мне удалось добиться этого, написав этот код

index.html 

    <div class="section newsletter">
    <figure class="image">
        <img src="src/img/newsletter.png">
    </figure>
            <div class="form">
                <h5>Keep updated with out latest news.<br>Subscribe to our newsletter</h5>
                <div class="field has-addons">
                    <div class="control">
                        <input class="input" type="text" placeholder="Enter Your Email">
                    </div>
                    <div class="control">
                        <a type="button" class="button btn-grad is-dark">
                            Subscribe
                        </a>
                    </div>
                </div>
            </div>
</div>

css 

.newsletter{
padding:0px;
.form{
    display: flex;
    flex-direction: column;        
    width:588px;
    height:297px;
    background: $bg-transperant;
    box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    // Layout
    position: relative;
    left: 140px;
    top: -386px;
    h5{
        padding: 50px 60px 40px 60px;
        font-weight: 600;
        font-size: 25px;
        line-height: 46px;
        color: #2F4B6E;
    }
    div{
        justify-content: center;
    }
    .input{
        height: 50px;
        width: 352px;
        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15);
        border-bottom-left-radius: 100px;
        border-top-left-radius: 100px;
    }
}

}

проблема в том, что он не реагирует на мобильные устройства или планшеты
это выглядит так enter image description here

Я использую положение относительно возможности поместить div в верхней части изображения, как я могу сделать это лучше, например, чтобы сделать его отзывчивым?также есть большое пустое пространство под картинкой, я не знаю, почему

Репроект Live Project https://github.com/Ov3rControl/ReachGate Обзор Live: https://ov3rcontrol.github.io/ReachGate/

1 Ответ

1 голос
/ 30 июня 2019

Это может быть связано с тремя проблемами.

1) Убедитесь, что у вас ваш видовой экран настроен на отзывчивость в голове

2) Не используйте жесткозакодированные размеры для контейнеров, которые выходят за пределы минимально возможного окна просмотра.Обратите внимание, что ваша форма имеет ширину 588 пикселей.Попробуйте вместо этого сделать width: auto;, а затем max-width: 588px;.

3) Подумайте не о жестком кодировании вашего позиционирования.Попробуйте что-то вроде этого вместо центрирования относительно позиционированных контейнеров.

Выглядит очень мило, хорошая работа!Один в сторону: считается хорошей практикой всегда привязывать метку к входу в целях доступности.Если вы не хотите, чтобы это было видно, это нормально! См. Это

Я сделал следующее, чтобы быстро отцентрировать форму: 

<!------------------------------------[NewsLetter Section - START]------------------------------------------->
    <div class="section newsletter">
        <div class="form">
            <h5>Keep updated with our latest news.<br>Subscribe to our newsletter</h5>
            <div class="field has-addons">
                <div class="control">
                    <input class="input" type="text" placeholder="Enter Your Email">
                </div>

                <div class="control">
                    <a type="button" class="button btn-grad is-dark">
                        Subscribe
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!------------------------------------[NewsLetter Section - END]------------------------------------------->

.newsletter {
  padding: 0px;
  background-image: url('src/img/newsletter.png');
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;

  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-height: 270px;
    max-width: 320px;
    background: $bg-transperant;
    box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.15);
    border-radius: 16px;

    // Layout
    h5 {
      padding: 50px 60px 40px 60px;
      font-weight: 600;
      font-size: 25px;
      line-height: 46px;
      color: #2f4b6e;
    }

    div {
      justify-content: center;
    }

    .input {
      height: auto;
      height: 50px;
      width: 352px;
      box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15);
      border-bottom-left-radius: 100px;
      border-top-left-radius: 100px;
    }
  }
}
...