Заголовок, занимающий больше размера контейнера, при ограничении размера экрана шириной мобильного устройства

#html #css

#HTML #css

Вопрос:

У меня есть заголовок внутри контейнера div, который, в свою очередь, находится внутри другого контейнера

 .wrapper {
  background-color: white;
}

.login_box {
  position: relative;
  margin-right: auto;
  margin-left: auto;
  top: 70px;
  width: 35%;
  background-color: #EDEDED;
  border: 1px solid #EDEDED;
  border-radius: 7px;
  padding: 5px;
  opacity: 0.98;
}

.login_header {
  width: 100%;
  height: 90px;
  background-color: #ffffff;
  color: #000000;
  text-align: center;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

.login_header h1 {
  font-family: 'Fjalla One', sans-serif;
  margin-top: 0;
  margin-bottom: 0;
  padding: 22px;
  color: #000000;
  font-size: 250%;
}

 <div class="wrapper">
  <div class="login_box">
    <div class="login_header">
      <h1>FanZentral.com</h1>
      Login or sign up below!
    </div>
  </div>
</div>

теперь, когда я уменьшаю ширину экрана до размера мобильного устройства. заголовок занимает больше места, чем контейнер, в котором он находится, может кто-нибудь помочь убедиться, что login box длина остается фиксированной даже после перехода к размеру мобильного устройства?

Ответ №1:

Вы должны добавить свойство min-width в свой .login_box. Смотрите ниже:

 .login_box {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    top: 70px;
    width: 35%;
    min-width:min-content;
    background-color: #EDEDED;
    border: 1px solid #EDEDED;
    border-radius: 7px;
    padding: 5px;
    opacity: 0.98;
}

Ответ №2:

Посмотрите, поможет ли это.Я установил ширину в min-content и добавил к ней отступы.

 .login_header {
  width: min-content;
  margin: 0 auto;
  background-color: #333;
  padding: 1rem;
  text-align: center;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

.heady {
  font-family: 'Fjalla One', sans-serif;
  padding: 22px;
  color: #f0f0f0;
  font-size: 250%;
}

.below {
  font-family: 'Work Sans', sans-serif;
  color: #f0f0f0;
  font-size: 1rem;
}

 <div class="login_box">

  <div class="login_header">
    <div class="heady">FanZentral.com</div>
    <div class='below'>Login or sign up below!</div>
  </div>

</div>

1. Ответы, содержащие только код, не рекомендуется использовать при переполнении стека, потому что они не объясняют, как это решает проблему. Пожалуйста, отредактируйте свой ответ, чтобы объяснить, что делает этот код и как он отвечает на вопрос, чтобы он был полезен OP, а также другим пользователям с подобными проблемами.