Commit 666f7ba2 authored by santiaago's avatar santiaago
Browse files

responsive about #83

parent e1cf2b0e

app/assets/css/about.css

+16 −50
Original line number Diff line number Diff line 
.about--backgroundGreen{

    /* background: #43BF86; */

    background: url(/labs/isogrids/banner/gradient?theme=frogideas&p=0.2&xt=4&h=580&w=400&gx1=0&gy1=0&gy2=40&gx2=40);



}



.about--backgroundGrey{
@@ -12,17 +10,6 @@ 
    background: #FFF;

}



.about-square--noPadding{

    padding-bottom: 0px;

    padding-top: 0px;

    padding-left: 0px;

    padding-right: 0px;

    height: 580px;

    border-top: solid 1px #CBCBCB;

    border-bottom: solid 1px #CBCBCB;

    border-left: solid 1px #CBCBCB;

}



.about--squareHeader,

.about--square{

    padding-bottom: 50px;
@@ -40,24 +27,8 @@ 
    border-right: 0;

}



.about-square--borderRight{

    border-right: solid 1px #CBCBCB;

}



.about-innerSquare--borderBottom{

    border-bottom: solid 1px #CBCBCB;

}



.about--square2{

    height: 290px;

}



.about-content--position{

    position: relative;

    top: 55%;

    text-align:center;

    transform: translateY(-50%);

    -webkit-transform: translateY(-50%);

.about-content--margin{

    margin-top: 50px;

}



.about-contentText--position{
@@ -75,14 +46,6 @@ 
    -webkit-transform: translateY(-50%);

}



.about-content--positionCenter{

    position: relative;

    top: 50%;

    text-align:center;

    transform: translateY(-50%);

    -webkit-transform: translateY(-50%);

}



.about-content--White{

    color: #FFF;

}
@@ -93,22 +56,25 @@ 
}



@media (max-width: 950px){

    .about-square--noPadding{

	height: 175px;

    }



    .about--squareHeader{

	height: 50px;	

    	height: 150px;

    	padding-top: 0px;

    	padding-bottom: 0px;

    }

    .about--square2{

	height: 75px;

	padding-top: 0px;



    .about--square{

    	height: 200px;

	padding-bottom: 0px;

	padding-top: 0px;

	border-top: 0;

	border-bottom: 0;

    }



    .about--square{

    	height: 220px;

    .about-content--margin{

	margin-top: 20px;

    }



    .about-contentText--position{

	top: 0%;

    }

}

app/partials/about.html

+9 −9
Original line number Diff line number Diff line
@@ -8,19 +8,19 @@ 
      <p>You can find our group on github!</p>

    </div>

  </div> <!-- / col-md-3 -->

  <div class="col-md-3 about--square">

    <div class="about-content--position">

      <img alt="santiago" src="assets/img/santiago.jpg" class="img-thumbnail" title="Santiago">

  <div class="col-sm-3 about--square">

    <div class="about-content--margin">

      <img alt="santiago" src="assets/img/santiago.jpg" class="img-responsive img-thumbnail" title="Santiago" width="262px">

    </div>

  </div> <!-- / col-md-3 -->

  <div class="col-md-3 about--square">

    <div class="about-content--position">

      <img alt="remy" src="assets/img/remy.jpg" class="img-thumbnail" title="Remy">

  <div class="col-sm-3 about--square">

    <div class="about-content--margin">

      <img alt="remy" src="assets/img/remy.jpg" class="img-responsive img-thumbnail" title="Remy" width="262px">

    </div>

  </div> <!-- / col-md-3 -->

  <div class="col-md-3 about--square">

    <div class="about-content--position">

      <img alt="carmen" src="assets/img/carmen.jpg" class="img-thumbnail" title="Carmen">

  <div class="col-sm-3 about--square">

    <div class="about-content--margin">

      <img alt="carmen" src="assets/img/carmen.jpg" class="img-responsive img-thumbnail" title="Carmen" width="262px">

    </div>

  </div> <!-- / col-md-3 -->

</div>