raimond raimond - 1 month ago 9
CSS Question

Child Divs aren't responsive, using Bootstrap

I have a markup with 2 columns. There is a column with person information and then a larger column with their review.

Currently it looks great on large screens, but on smaller (1,200px and smaller) it goes haywire.

Large Screen: https://gyazo.com/670d8904c209835a13e4712e553b0568
Small Screen: https://gyazo.com/7280b47917a3b982c514533dd1d92e4f

What needs to be done in

CSS
to fix the responsive layout of this part? I'd like the review box to get smaller while person information box stays the same size until it's too small, then it would just move the person information box above the review box and change the arrow to point up instead of to the left.

Jsfiddle:https://jsfiddle.net/0jdueb1s/

Here is the relevant code.



.person {
background: #F0F0F0;
height: 100px;
width: 100px;
margin: 35px 0 0px 50px;
padding: 25px;
}
.person-name {
padding-top: 5px;
margin-left: 50px;
}
.person1.rounded-avatar.shadow {
background-attachment: fixed;
background: url(https://s3-media4.fl.yelpcdn.com/photo/y9xxrXTw3Xf_6gKF_9MjcQ/ls.jpg);
background-size: contain;
}
.person2.rounded-avatar.shadow {
background-attachment: fixed;
background: url(https://s3-media2.fl.yelpcdn.com/photo/SXxITzqSbMPWgaybCz9xFg/ls.jpg);
background-size: contain;
}
.person3.rounded-avatar.shadow {
background-attachment: fixed;
background: url(https://s3-media3.fl.yelpcdn.com/photo/CjKL1DIzqsGuCKQrCXpMuA/ls.jpg);
background-size: contain;
}
.person4.rounded-avatar.shadow {
background-attachment: fixed;
background: url(https://s3-media2.fl.yelpcdn.com/assets/srv0/yelp_styleguide/ebc2a2e28267/assets/img/default_avatars/user_large_square.png);
background-size: contain;
}
.rounded-avatar {
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 50%;
/* Firefox 1-3.6 */
-moz-border-radius: 50%;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+
*/
border-radius: 50%;
}
.rounded-corners {
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 0 8px 8px 8px;
/* Firefox 1-3.6 */
-moz-border-radius: 0 8px 8px 8px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+
*/
border-radius: 0 8px 8px 8px;
}
.shadow {
-webkit-box-shadow: 1px 1px 3px 1px rgba(158, 158, 158, 0.67);
-moz-box-shadow: 1px 1px 3px 1px rgba(158, 158, 158, 0.67);
box-shadow: 1px 1px 3px 1px rgba(158, 158, 158, 0.67);
}
.testimonials {
background: #F0F0F0;
float: right;
height: 150px;
margin: 25px 25px 15px 25px;
padding: 25px;
text-align: left;
}
.arrow-left {
border-bottom: 15px solid transparent;
border-right: 15px solid #DADADA;
border-top: 15px solid transparent;
height: 0;
margin-left: 10px;
margin-top: 55px;
position: absolute;
width: 0;
}
.testimonials-section {
background: #F6F6F6;
height: auto;
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Testimonials Section -->
<section id="testimonials" class="testimonials-section">
<div class="container testimonials-container center-block">
<div class="row">
<div class="col-lg-12">
<h1 class="">Testimonials</h1>
<p>We are proud of the work we do! Here is what people have to say about us & our service. Please consider viewing our Yelp! page for more reviews or let others know what you think of our staff and services.</p>
<div class="col-lg-12">
<div class="col-lg-2">
<div class="person person1 rounded-avatar shadow">
</div>
<h4 class="person-name">Susan B.</h4>
</div>
<div class="col-lg-9">
<div class="arrow-left"></div>
<div class="testimonials rounded-corners shadow">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat posuere sapien, id porttitor metus consequat vel. Ut et enim suscipit, malesuada nunc interdum, porta est. Vestibulum fringilla non mauris at consectetur. Nunc vestibulum
efficitur mauris non hendrerit. Duis id eros lacus. Morbi sed interdum tortor. Sed quam orci, rhoncus sed tempor a, vehicula sit amet risus. Nulla facilisis sagittis dui vitae ullamcorper.</p>
</div>
</div>
<div class="col-lg-2">
<div class="person person2 rounded-avatar shadow">
</div>
<h4 class="person-name">Bob P.</h4>
</div>
<div class="col-lg-9">
<div class="arrow-left"></div>
<div class="testimonials rounded-corners shadow">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat posuere sapien, id porttitor metus consequat vel. Ut et enim suscipit, malesuada nunc interdum, porta est. Vestibulum fringilla non mauris at consectetur. Nunc vestibulum
efficitur mauris non hendrerit.</p>
</div>
</div>
<div class="col-lg-2">
<div class="person person3 rounded-avatar shadow">
</div>
<h4 class="person-name">Johnie B.</h4>
</div>
<div class="col-lg-9">
<div class="arrow-left"></div>
<div class="testimonials rounded-corners shadow">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat posuere sapien, id porttitor metus consequat vel. Ut et enim suscipit, malesuada nunc interdum, porta est. Vestibulum fringilla non malamcorper.</p>
</div>
</div>
<div class="col-lg-2">
<div class="person person4 rounded-avatar shadow">
</div>
<h4 class="person-name">Rachel C.</h4>
</div>
<div class="col-lg-9">
<div class="arrow-left"></div>
<div class="testimonials rounded-corners shadow">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat poempor a, vehicula sit amet risus. Nulla facilisis sagittis dui vitae ullamcorper.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>





Thank you everyone for your help in advance. I appreciate all the help I can get while I get through this noob stage of my learning.

Answer

You are missing rows for the around your column layout. also change lg to xs so that it will apply to all the layout screens.

change height to auto for testimonials and add media queries to adjust the position.

here is the jsfiddle:

@media screen and ( max-width: 768px){
    .testimonials {
        margin-left:50px !important;
    }
    .arrow-left{
        margin-left:31px !important;
    }
}

https://jsfiddle.net/0jdueb1s/3/