我如何使它具有响应性，以便改变大小？

Question

所以现在这个对象成为对象，当我调整浏览器的大小时，它们在彼此之间跳下来，但我希望它只是改变大小以适合电话分辨率。任何人都可以帮我做这个工作，因为我一直在尝试通过使宽度具有最大值等来进行尝试，但是似乎由于某种原因它没有起作用。在下方，我上传了一张当物体跳下时的外观图像。

#box h2 {
  font-family: 'Open Sans', sans-serif;
  font-size: 26px;
  color: #888;
  margin-bottom: 10px;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  text-decoration: none;
}

.text-1 {
  max-width: 900px;
  margin-right: 130px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  color: #888;
  text-align: left;
}

.text-1 p {
  margin-top: 30px;
  font-size: 22px;
  line-height: 36px;
  text-align: left;
}

#box {
  background-color: white;
  display: inline-block;
}

.first {
  width: 300;
  margin-top: 5px;
  max-height: 200px;
  box-shadow: 2px;
  float: left;
  margin: 30px;
}

.second {
  width: 300px;
  margin-top: 5px;
  max-height: 200px;
  box-shadow: 2px;
  float: left;
  margin: 30px;
}

.third {
  width: 300px;
  margin-top: 5px;
  max-height: 200px;
  box-shadow: 2px;
  float: left;
  margin: 30px;
}

.third p {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 32px;
  color: #888;
  font-weight: 300;
}

.first p {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 32px;
  color: #888;
  font-weight: 300;
}

.second p {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 32px;
  color: #888;
  font-weight: 300;
}

h3 {
  font-size: 26px;
  font-weight: 700;
  color: #888;
  line-height: 30px;
  text-transform: uppercase;
}

.parallax {
  /* The image used */
  background-image: url('/assets/image/parallax.jpg');
  /* Full height */
  height: 250px;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<div id="box">
  <h2>Vår process</h2>
  <div class="text-1">
    <p>VI HJÄLPER DIG MED ALLT.</p>
  </div>
  <div class="first wow fadeInLeft"><img src="assets/image/kontakt.png">
    <h3>KONTAKT</H3>
    <p>Kontakta oss genom telefon eller vårat kontaktformulär på hemsidan.</p>
  </div>
  <div class="second wow fadeInUp"><img src="assets/image/arende.png">
    <H3>GRANSKAN</H3>
    <P>Vi går igenom ditt ärende och ser om vi har möjlighet och utföra jobbet.</P>
  </div>
  <div class="third wow fadeInRight"><img src="assets/image/leverans.png">
    <H3>LEVERANS</H3>
    <P>Vi kommer hem till dig och fixar det du behöver hjälp med.</P>
  </div>
</div>

Answer 1

You should try HTML "figure" for this.

Link -> jsfiddle.net/DamianToczek/kxfu7Lep/6/

Fix this Stackoverflow: (Links to jsfiddle.net must be accompanied by code. Please indent all code by 4 spaces using the code toolbar button or the CTRL+K keyboard shortcut. For more editing help, click the [?] toolbar icon.)

Tried with backticks, with ctrl + K and it keeps saying the same.

Answer 2

要根据屏幕大小调整元素大小，请使用@media查询。这是一个不错的resource。

@media screen and (max-width: 1440px) {
  .signmodal {padding-top: 15%;}
  #signformclosebutton {font-size: 2em;}
  .imgmodal{padding-top: 5%;}
  .imgcontainer{width: 52.5%;}
  };