I have created a responsive layout that works well until the screen width is less than 800px, causing it to become disorganized.
Is there a way to ensure that the logos simply shrink instead of rearranging themselves underneath each other?
Check out this JSFiddle link for reference.
Code snippet:
<div class="container">
<div class="testimonials row-fluid">
<div class="span6">
<div class= ... (code continues)
CSS snippet:
.testimonials {
background-color:#f7f7f7;
}
.quote {
background: url("http://www.flexmail.net/images/quote_home.gif") left top no-repeat;
height: 128px;
margin: 20px auto 0 auto;
padding: 20px;
}
.quote .text {
color: #444444;
line-height: 22px;
}
.quote .author {
color: #666666;
float: left;
font-family:'colaboratelightregular';
font-size: 12px;
line-height: 22px;
margin: 10px 0 0;
}