Section elements not resizing/keeping format to different screen sizes?

Question

For the life of me I cannot get these section elements to be responsive. I don't really know what I'm doing wrong. I think it may have to do with my media queries.

Any ideas? Or maybe I just have no idea what I'm doing when I thought I did. Quite possible!

 <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

因此，您已经在CSS中使用了百分比，因此请删除所有@media CSS，并告诉我它的外观。

Answer 2

There's quite a lot wrong here, it seems to me. So much so that you might need to be considerably more specific about what you what to achieve regarding "responsiveness", which is a vague term rather than a description of a specific behaviour. I can give you a few tips that will at least highlight where you might be confused.

• float has no center value. Fortunately setting it probably won't cause any problems.
• Using position: absolute on body likely isn't having the effect you're expecting, and typically isn't something you'd want to do, if I'm not mistaken. If declaring body as a positional parent was necessary I'd suggest using position: relative instead, but given that body is one of the ultimate parents of the document anyway, everything will already be position relative to it.
• You're also applying position: absolute to your section elements, but as with body you haven't specified any positions ( top|right|bottom|left ). Because you've got body set to absolute the sections that become absolute will adhere to body with little regard to the other objects on the page, causing effects you probably weren't hoping for. You might be confused about the relationship between position and float , where in fact that isn't really one at all.
• You're floating elements which are also being set to 100% width, which probably isn't having the effect you're expecting, and will in fact simply cause all the content of those containers to behave almost as if they aren't in containers at all. Floating is usually applied to objects which are narrower than the parent, allowing them to cause other inline or floating objects to wrap around them.

You might consider revising your interpretation of the term "responsive". I could argue that what you have is responsive because stuff responds to the size of the screen; it just doesn't look very good. You could achieve responsiveness in a wide variety of ways, you just need to know what layout you're after on smaller screens, and figure out how to change the styles you have for one size of screen to achieve the layout you want for others.

Answer 3

1. plz remove position:absolute from body

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

2.plz remove position:absolute from section

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

3.in @media screen and (max-width: 740px), add section.kppr to float:none; & margin-top:-6%;. (-6% ?)

4.in @media screen and (max-width: 740px), section.twgb , section.descript & section.discount to add float:none; & text-align:center; .

5.in @media screen and (max-width: 740px), add this code to

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

sorry for bad English :(