Ben Ben - 5 months ago 25
CSS Question

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

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. 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 :(

Comments