Div 在移动网站上不再左对齐

Question

我正在从桌面版本创建一个心理健康网站，我想将 div 与移动视图的左侧对齐。在 div 内，有一个输入文本字段和两个按钮，作为 CSS Flexbox 的一部分。我正在使用@media。

以下是 div 内容在移动屏幕上的样子：

我想移动 div 内容，以便它们与白色输入文本字段上方的段落文本对齐。

我尝试使用margin-left和align-items来操作div，但它没有向左移动足够远。然后我尝试使用 margin-left 和 margin-right 手动操作 div，但按钮开始拉伸而不是保持其大小。

.input {
  margin-left: 2.5em;
  background-color: #F7F5FB;
  color: #1B9AAA;
  border: none;
  font-size: 1em;
  width: 25%;
  padding: 1em 1em;
}

#breathingCircleButton {
  border: none;
  background-color: #1B9AAA;
  color: #F7F5FB;
  padding-left: 1.5%;
  padding-right: 1.5%;
  padding-top: 1%;
  padding-bottom: 1%;
  text-align: left;
  text-decoration: none;
  display: block;
  font-size: 1.5em;
  margin-bottom: 2em;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  border-radius: 12px;
  float: left;
}

#containerAngry {
  display: flex;
  flex-direction: column;
  column-gap: 0.5em;
  align-items: left;
}

@media screen and (max-width: 850px) {
  #containerAngry {
    margin-left: 5%;
  }
}

<p class="angryText">sample text</p>
<div id="containerAngry">
  <input class="input" id="angryInput">
  <button onclick="angry()" style="text-align:left; margin-left: 2em; margin-top: 0.5em; margin-bottom: 1em;" id="breathingCircleButton">Submit</button>
  <button onclick="document.getElementById('angryInput').value = ''; document.getElementById('angry').innerHTML = '';" style="text-align:left; margin-left: 2em; margin-top: 0.5em; margin-bottom: 1em;" id="breathingCircleButton">Clear input field</button>
</div>

<p id="angry"></p>
<script>
  function angry() {
    document.getElementById("angry").innerHTML = "I understand. You have every right to feel the way you do and it's frustrating.";
  }
</script>

感谢您的反馈和帮助！

Answer 1

Use min-width instead of max-width and give margin only after screen size above  850px.

Check below code on mobile browser. content align properly to the left side


    .input {
     
      background-color: #F7F5FB;
      color: #1B9AAA;
      border: none;
      font-size: 1em;
      width: 25%;
      padding: 1em 1em;
    }

    #breathingCircleButton {
      border: none;
      background-color: #1B9AAA;
      color: #F7F5FB;
      padding-left: 1.5%;
      padding-right: 1.5%;
      padding-top: 1%;
      padding-bottom: 1%;
      text-align: left;
      text-decoration: none;
      display: block;
      font-size: 1.5em;
      margin-bottom: 2em;
      cursor: pointer;
      font-family: 'Nunito', sans-serif;
      border-radius: 12px;
      float: left;
    }

    #containerAngry {
      display: flex;
      flex-direction: column;
      column-gap: 0.5em;
      align-items: left;
    }

    @media screen and (min-width: 850px) {
      #containerAngry {
        margin-left: 5%;
      }
        input{
        margin-left:2.5em;
        }
        #breathingCircleButton{
            margin-left:2.5em;
        }
    }
 

<!-- language: lang-html -->

    <p class="angryText">sample text</p>
    <div id="containerAngry">
      <input class="input" id="angryInput">
      <button onclick="angry()" style="text-align:left;  margin-top: 0.5em; margin-bottom: 1em;" id="breathingCircleButton">Submit</button>
      <button onclick="document.getElementById('angryInput').value = ''; document.getElementById('angry').innerHTML = '';" style="text-align:left; margin-top: 0.5em; margin-bottom: 1em;" id="breathingCircleButton">Clear input field</button>
    </div>

    <p id="angry"></p>
    <script>
      function angry() {
        document.getElementById("angry").innerHTML = "I understand. You have every right to feel the way you do and it's frustrating.";
      }
    </script>

<!-- end snippet -->