セクション要素のサイズ変更/フォーマットを別の画面サイズに維持しないでください。

Question

私の人生のために、私はこれらのセクションの要素を反応させることができません。私が間違っていることは本当にわかりません。私はそれが私のメディアの質問と関係しているかもしれないと思う。

アイデア？それとも、私がやったと思ったときに何をしているのか分かりません。かなり可能！

<style> 
 
\t section.kppr{ 
 
     width: 100%; 
 
     text-align: center; 
 
     margin: -6% 0 0 0; 
 
     float: center; 
 
    } 
 
    
 
    \t .kppr p{ 
 
     font-size: 420%; 
 
     color: #89d4e8; 
 
     font-weight: bold; 
 
    } 
 
    
 
    .kppr img{ 
 
    \t  max-width: 100%; 
 
    \t height: auto; 
 
    \t width: auto; 
 
    } 
 
    
 
    \t .twgb{ 
 
     width: 14%; 
 
     float: left; 
 
     text-align: center; 
 
     margin: 0 0 0 20%; 
 
    } 
 
    
 
    .twgb p{ 
 
    \t line-height: 120%; 
 
    font-weight: bold; 
 
    padding: 4% 0 0 0; 
 
    font-size: 115%; 
 
    letter-spacing: 1px; 
 
    } 
 
    
 
    .descript{ 
 
    \t text-align: left; 
 
    } 
 
    
 
    .descript p{ 
 
    \t line-height: 120%; 
 
     color: black; 
 
     font-weight: bold; 
 
     padding: 1% 0 0 0; 
 
    
 
    } 
 
    
 
    .discount img{ 
 
    \t 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{ 
 
     \t position: absolute; 
 
    } 
 
    \t \t 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; 
 
    } 
 
\t \t 
 
    section.discount{ 
 
     float: left; 
 
     width: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    } 
 
    
 
</style>

<section class="kppr"> 
 
\t <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"> 
 
\t <img src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/5759f17507eaa0ecb82b3677/1465512309355/STL-Home-5.png" alt="5% given back" /> 
 
</section> 
 

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

Answer 1

1. PLZ位置を削除する：絶対体

   から

   @media画面と（最大幅：478px）{ 本体{位置：絶対します。セクション

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

   3.in @media画面から絶対： }
   }

2.plz位置を除去する（最大幅：740px）にsection.kpprを追加 float：なし; & margin-top：-6％;. （？-6％）

4.in @media画面と（最大幅：740px）、、 section.twgb & section.descript section.discount にフロート追加：なし。 & text-align：center; 。

5.in @media画面と（最大幅：740px）、

悪い英語のため申し訳ありません

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

にこのコードを追加:(

Answer 2

だからあなたはすでにあなたのCSSでのパーセンテージを使用して、ので、あなたの@mediaのCSSのすべてを削除し、それはあなたにどのように見えるかを教えています。

Answer 3

ここではかなり間違っています、それは私に似ています。あなたが「応答性」に関して何を達成すべきかについてかなり特定する必要があるかもしれないので、特定の行動の説明ではなくむやみな用語です。私はあなたが混乱するかもしれないところを少なくとも強調するヒントをいくつか教えてもらえます。

• floatには、centerという値がありません。幸いにもそれを設定するとおそらく は問題を引き起こさないでしょう。
• position: absoluteをbodyに送信すると、あなたが期待している効果が得られない可能性があります。誤解がなければ、通常はやりたいことではありません。位置の親としてbodyを宣言する必要がある場合は、代わりにposition: relativeを使用することをお勧めしますが、本文が最終的な親の1つであるとすれば、すべてはすでに相対位置になります。
• section要素にもposition: absoluteを適用していますが、bodyと同様に、位置（top|right|bottom|left）を指定していません。 bodyがabsoluteに設定されているため、absoluteになるセクションは、ページ上の他のオブジェクトとはほとんど関係なくbodyになり、おそらく期待していなかった効果が発生します。 positionとfloatの関係については混乱するかもしれませんが、実際にはまったくそうではありません。
• フローティング要素も100％幅に設定されています。これはおそらく期待していた効果がないため、実際にはそれらのコンテナのすべてのコンテンツが、コンテナにはまったくありません。フローティングは通常、親よりも狭いオブジェクトに適用され、他のインラインオブジェクトや浮動オブジェクトをラップすることができます。

用語「反応性」の解釈を修正することを検討してください。私はあなたが持っているものは画面の大きさに反応するので反応すると主張することができます。それはちょうど非常によく見えません。あなたは、さまざまな方法で応答性を達成することができます。小さな画面でどのようなレイアウトをしているのかを知り、1つの画面サイズに合わせたスタイルを変更して、他のユーザーが望むレイアウトを実現する方法を見つけ出すだけです。