html - 部分元素不调整/保持格式以适应不同的屏幕尺寸？

Question

在我的生活中，我无法让这些部分元素响应。我真的不知道我做错了什么。我认为这可能与我的媒体查询有关。

有什么想法吗？或者也许我只是不知道自己在做什么，而我以为自己在做什么。很有可能!

<style>
	section.kppr{
      width: 100%;
      text-align: center;
      margin: -6% 0 0 0;
      float: center;
    }
  
  	.kppr p{
      font-size: 420%;
      color: #89d4e8;
      font-weight: bold;
    }
  
  .kppr img{
  	    max-width: 100%;
    	height: auto;
    	width: auto;
  }
  
  	.twgb{
      width: 14%;
      float: left;
      text-align: center;
      margin: 0 0 0 20%;
    }
  
  .twgb p{
  	line-height: 120%;
    font-weight: bold;
    padding: 4% 0 0 0;
    font-size: 115%;
    letter-spacing: 1px;
  }
  
  .descript{
  	  text-align: left;
  }
  
  .descript p{
  	  line-height: 120%;
      color: black;
      font-weight: bold;
      padding: 1% 0 0 0;
    
  }
  
  .discount img{
  	float: left;
    padding: 0 1%;
    max-width: 100%;
    height: auto;
    width: auto;
  }
  
  /*--------------------MEDIA!!!---------------*/
  @media screen and (max-width: 478px){
        body{
            position: absolute;
        }   
    }
  
   @media screen and (max-width: 740px){
     section{
     	position: absolute;
     }
   		section.kppr{
          float: left;
          width: 100%;
          margin: 0;
          padding: 0;
        }
     
     section.twgb{
       float: left;
       width: 100%;
       margin: 0;
       padding: 0;
     }
     
     section.descript{
       float: left;
       width: 100%;
       margin: 0;
       padding: 0;
     }
		
     section.discount{
       float: left;
       width: 100%;
       margin: 0;
       padding: 0;
     }
   }
  
</style>

<section class="kppr">
	<p>kids play <img src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/5759e5882b8ddea12fed577b/1465509256880/STL-Home-Heart.png" alt="kids play parents relax" /> parents relax</p>
</section>

<section class="twgb">
  <p><font color="#000">together we</font><br><font color="#89d4e8" size="6%">give back</font></p>
</section>

<section class="discount">
	<img src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/5759f17507eaa0ecb82b3677/1465512309355/STL-Home-5.png" alt="5% given back" />
</section>

<section class="descript">
	<p> of every dollar goes back to helping children <br>in foster care find safe and loving homes.</p>
</section>

Answer 1

1. 请从 body 中删除 position:absolute

   @media screen and (max-width: 478px){ body { position:absolute；
   

2.plz 从部分中删除 position:absolute

  @media screen and (max-width: 740px){
         section{
            position: absolute;
         }
}

3.在@media screen and (max-width: 740px), add section.kppr 到 float :无； & margin 顶部:-6%；。 (-6%？)

4.in @media screen and (max-width: 740px), section.twgb, section.descript & section.discount到 添加 float :无； & 文字对齐:居中； .

5.在@media screen and (max-width: 740px), 添加这段代码

**section.discount img**{
         float:none;
         }

抱歉英语不好:(