Блог

Главная - Вопросы по программированию - Как изменить ширину div

Как изменить ширину div

#css

Вопрос:

Мои текущие страницы входа в систему выглядят следующим образом

Мобильный размер
Размер рабочего стола

Я доволен своей страницей входа в систему размером с рабочий стол, но для моей мобильной страницы я бы хотел скрыть изображение справа и заполнить пространство частью входа.

Это то, что у меня есть до сих пор, но, похоже, это не работает

 @media screen and (max-width: 415px) {
  #login .overlay-container {
    display: none;
  }
  #login .log-in-container {
    width: 100%;
  }
}

#login .log-in-container {
  left: 0;
  width: 50%;
  z-index: 2;
}

#login .overlay-container {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
} 
 <div class="container" id="container" style="margin: auto;">
  <div class="form-container log-in-container">
    <form method="POST" action="/customer/login">
      <h1>Login</h1>
      <input id="userEmail" type="email" class="form-control" id="floatingInput" placeholder="name@example.com" name="email">
      <input id="userPw" type="password" class="form-control" id="floatingPassword" placeholder="Password" name="password">
      <a href="#">Forgot your password?</a>
      <button type="submit">Log In</button>
    </form>
  </div>
  <div class="overlay-container">
    <div class="overlay">
      <div class="overlay-panel overlay-right">
        <img src="https://i.imgur.com/ZaddCas.jpg"> {{!--
        <h1>HTML CSS Login Form</h1>
        <p>This login form is created using pure HTML and CSS. For social icons, FontAwesome is used.</p> --}}
      </div>
    </div>
  </div>
</div>

Ответ №1:

Основная причина, по которой у вас возникла эта проблема, заключается в том, что ваши правила «рабочего стола», похоже, не определены в самих медиа-запросах (если только вы не делитесь этой частью CSS).

Следовательно, ваши «настольные» правила всегда учитываются, потому что:

  • они обладают точно такой же специфичностью, как и «мобильные», указанные в медиаконтенте (что не влияет на специфику).
  • предположительно, они указаны позже в вашем файле CSS

Итак, 2 возможных решения (среди, вероятно, более длинного списка возможностей, но они кажутся самыми простыми) :

  • Включите эти правила «рабочего стола» в медиа-запрос. Основываясь на вашем мобильном медиа-запросе, я бы предложил @media screen and (min-width: 416px) {}
  • Измените порядок, в котором вы размещаете эти правила в своем CSS-файле. Если вы переместите всю «мобильную» часть в нижней части таблицы стилей, они будут считаться последними, отменяющими аналогичные правила, определенные ранее

Конечно, вы также можете комбинировать и то, и другое, если хотите, но один только первый уже будет делать свое дело. Обычно мне не нравится слишком полагаться на положение правил в файле CSS, чтобы он работал, так как он слишком подвержен изменениям…

Метки: