时间戳

首页 > 解决方案 > 媒体查询、视口居中和倾斜边距

html - 媒体查询、视口居中和倾斜边距

问题描述

我试图让我的#titlesec 和#forms ID 在 500 像素或更少时占据 100% 的视口。问题是，它不仅没有这样做，而且实际上是有偏差的。如果您可以通过 chrome 开发人员工具检查它们，您将看到边距一直到视口的右侧。

这是我的HTML...

  <h1 id="title">
      Customer Survey Form
    </h1> 
    <p id="description">Tell us what you think about our product</p>
    </div>

    <div id="forms">
    <form id="survey-form-1">
      <p id="name">Name: <input type="text" placeholder="Full Name"></p>
      <p id="number">Number: <input type="number"  placeholder="10 digits here""></p>
      <p id="email">Email: <input type="text" placeholder="put your email here"></p>
      <p id="email"  >Password: <input type="password" placeholder="password"></p>

    </form>
        <br>
        <p>
             <label>How would you describe yourself?</label>
          <br>
             <select id= "myList">
               <option value = "student">Student</option>
               <option value = "child">Child</option>
               <option value = "parent">Parent</option>

             </select>
          </p>
          <br>
        <form id="survey-form-2">
        <p> Q: How satisfied are you with our product?</p>
        <br>
        <input type="radio" name="satisfaction" value="Very Satisfied" checked> Very Satisfied </input>
        <br>
        <input type="radio" name="satisfaction" value="Satisfied" > Satisfied </input>
        <br>
        <input type="radio" name="satisfaction" value="Kinda Satisfied"> Kinda Satisfied </input>
        <br>
        <input type="radio" name="satisfaction" value="Not Satisfied"> Not Satisfied </input>
        <br>
        <br>

        <p> Q: What do you like about our product?</p>
         <input type="checkbox" name="likes" value="likes" checked> The product is reliable </input>
        <br>
        <input type="checkbox" name="likes" value="Satisfied" > The the kids love it </input>
        <br>
        <input type="checkbox" name="likes" value="Kinda Satisfied"> The product is fun </input>
        <br>
        <input type="checkbox" name="likes" value="Not Satisfied">The product is long lasting </input>

        </form>
        </div>

这是我的 CSS ......

body {
background-color:#3385FF;  
}

#title-sec {
  display: flex;
  flex-direction: column;
  background-color: white;
  width:50%;
  height: 150px;
  position: relative;
  left: 25%;
  margin-top:-7px;
  margin-bottom: 10px;

}


h1 {
  text-align: center;
}

p {
  text-align: center;
}

#forms {
  display:flex;
  flex-direction:column;
  margin-top: 10px;
  background: white;
  width: 50%;
  position: relative;
  left: 25%;
}
#survey-form-1 {
  text-align: center;
  padding-top: 20px;
}

#survey-form-2 {
  text-align:center;
}

input {
  text-align: center;
}


@media only screen and (max-width: 500px) {

  #title-sec {

  display: flex;
  flex-direction: column;
   align-items: stretch;
  background-color: white;
  width:-75%;
  height: 150px;
  padding-bottom: 20px;
  margin-bottom: 20px;
margin-right: 131.25;

width:75%;    
}

  #forms {
  display:flex;
  flex-direction:column;
  margin-top: 10px;
  background-color: white;
  align-items: center; 
  width: 100%;  

  }
}

如果您需要更多信息，或者需要我澄清任何事情，请告诉我。

标签： htmlcssresponsive-designmedia-queriesviewport

解决方案

放在 CSS 文件的底部：

@media (max-width: 500px) {
  #titlesec {
    /*Put your argument with 100% Eg. width: 100%*/
  }
  #forms {
    /*Put your argument with 100% Eg. width: 100%*/
  }
}

对于倾斜的文本，试试这个：

#titlesec, #forms {  
   white-space: pre-wrap;      /* Webkit */    
   white-space: -moz-pre-wrap; /* Firefox */     
   white-space: -pre-wrap;     /* Opera <7 */    
   white-space: -o-pre-wrap;   /* Opera 7 */     
   word-wrap: break-word;      /* IE */ 
}

它会是这样的：

@media (max-width: 500px) {
      #titlesec, #forms {  
         white-space: pre-wrap;      /* Webkit */    
         white-space: -moz-pre-wrap; /* Firefox */     
         white-space: -pre-wrap;     /* Opera <7 */    
         white-space: -o-pre-wrap;   /* Opera 7 */     
         word-wrap: break-word;      /* IE */ 
      }

      #titlesec {
        /*Put your argument with 100% Eg. width: 100%*/
      }
      #forms {
        /*Put your argument with 100% Eg. width: 100%*/
      }
    }

我希望它有帮助；）

推荐阅读