Przesunięcie elementu input na stronie

pytanie zadane 18 września 2019 w HTML i CSS przez tgv Użytkownik (890 p.)

<div class="colorlib-footer"> <h3>Newsletter</h3> <div class="d-flex justify-content-center"> <form action="action.php" class="colorlib-subscribe-form"> <div class="form-group d-flex"> <div class="icon"><button type="submit" class="btn btn-info"><span class="icon-paper-plane"></span></button></div> <input type="text" class="form-control" placeholder="Enter Email Address"> </div>

#colorlib-aside .colorlib-footer .colorlib-subscribe-form .form-group {
      position: relative;
      margin-top: -20px;
      margin-bottom: 0;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      -ms-border-radius: 0;
      border-radius: 0; }
      #colorlib-aside .colorlib-footer .colorlib-subscribe-form .form-group input {
        padding-right: 40px;
        background: #fff !important;
        border: 1px solid #ece4d5 !important;
        color: rgba(0, 0, 0, 0.4) !important;
        font-size: 14px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        border-radius: 0; }
        #colorlib-aside .colorlib-footer .colorlib-subscribe-form .form-group input::-webkit-input-placeholder {
          /* Chrome/Opera/Safari */
          color: rgba(0, 0, 0, 0.4) !important; }
        #colorlib-aside .colorlib-footer .colorlib-subscribe-form .form-group input::-moz-placeholder {
          /* Firefox 19+ */
          color: rgba(0, 0, 0, 0.4) !important; }
        #colorlib-aside .colorlib-footer .colorlib-subscribe-form .form-group input:-ms-input-placeholder {
          /* IE 10+ */
          color: rgba(0, 0, 0, 0.4) !important; }
        #colorlib-aside .colorlib-footer .colorlib-subscribe-form .form-group input:-moz-placeholder {
          /* Firefox 18- */
          color: rgba(0, 0, 0, 0.4) !important; }
      #colorlib-aside .colorlib-footer .colorlib-subscribe-form .form-group .form-control {
        border: 1px solid rgba(100, 255, 255, 0.2);
        font-weight: 400;
        bottom: 20px;
        }

      #colorlib-aside .colorlib-footer .colorlib-subscribe-form .icon {
          position: absolute;
          top: 50%;
          right: 10px;
          color: black;
          bottom: 20px;
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%);
          color: rgba(0, 0, 0, 0.5); 
        }
      #colorlib-aside .colorlib-footer .colorlib-subscribe-form .icon .btn-info{
          color: white;
        }

Witajcie, próbuję przesunąć pole input formularza obsługi newslettera na dół strony. Pole nie może zakrywać napisu newsletter. Wszystkie możliwe sposoby zostały już wykorzystane. Jak ugryźć tego gniota kiedy nic nie pomaga?

komentarz 18 września 2019 przez lateM Pasjonat (17,660 p.)

Nie dziwię się, że nie możesz się połapać w tym kodzie... Możemy dostać link do strony? Ciężko coś poradzić mając tak mały wycinek kodu. Z pomocą devtoolsów pójdzie sprawniej.

2 odpowiedzi

odpowiedź 18 września 2019 przez tgv Użytkownik (890 p.)

odpowiedź 18 września 2019 przez Artek Stary wyjadacz (11,800 p.)

Powiem Ci, że trochę szajba jest w Twoim kodzie. Co do konkretów: nie wiem czy o to Ci chodziło ale przesunąłem w dół po prostu zmieniając właściwość bottom na 0 klasy colorlibfooter. Co nie było zbyt trudne...