Develop Reference

Responsive Text Issue

I have the following code:
body{
width:100%;
font-family:sans-serif;
background: transparent;
}
.testimonials{
margin:0;
display:grid;
grid-template-columns: repeat(auto-fit,minmax(350px, 1fr));
grid-gap:20px;
}
.testimonials .card{
position:relative;
width:350px;
margin:0 auto;
background:#333;
padding:20px;
box-sizing: border-box;
text-align:center;
box-shadow: 10px 8px 20px rgba(0,0,0,.5);
overflow: hidden;
}
.testimonials .card .layer{
position: absolute;
top: calc(100% - 3px);
width:100%;
height:100%;
left:0;
background:linear-gradient(#034e70, #390375);
z-index:1;
transition:0.5s;
}
.testimonials .card:hover .layer{
top:0;
}
.testimonials .card .content{
position:relative;
z-index:2;
}
.testimonials .card .content p{
font-size:18px;
line-height:24px;
color:#FFF;
}
#media all and (max-width: 500px) {
.testimonials .card .content p{
width: 100%;
}
}
.testimonials .card .content .image{
width:100px;
height:100px;
margin: 0 auto;
border-radius:50%;
overflow:hidden;
margin-bottom: 16px;
box-shadow: 0 10px 20px rgba{0,0,0, .2};
}
.testimonials .card .content .details h2{
font-size:15px;
color:#fff;
}
.testimonials .card .content .details h2 span{
color:#03a9f4;
font-size:12px;
transition:0.5s;
}
.testimonials .card:hover .content .details h2 span{
color:#fff;
}
<section id="References">
<div class="section-title">
<h2>References</h2>
</div>
<div class="testimonials">
<!-- CARD 1 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 1 end-->
<!-- CARD 2 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 2 end-->
<!-- CARD 3 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 3 end-->
</div>
</section>
I have the above code embedded in a website and so when I view the website on a smaller screen, I am getting this output:
The white text, image, and blue text are not responsive. However, the card is. Its just these three things, and I tried adding media queries to make them responsive but it did not work for some reason, and the output was the exact same as above.
Expected Output
When I inspect it and view it on 414 width, I am getting the above expected output which is what I want. However, below 414 width, I am getting the output as shown in the very first picture. How would I fix this? Any suggestions?

Try updating the grid-template-columns on media query for responsive design/mobile screen.
body {
width: 100%;
font-family: sans-serif;
background: transparent;
margin: 0;
}
.testimonials {
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap: 20px;
padding: 20px;
}
.testimonials .card {
position: relative;
max-width: 350px;
margin: 0 auto;
background: #333;
padding: 20px;
box-sizing: border-box;
text-align: center;
box-shadow: 10px 8px 20px rgba(0, 0, 0, .5);
overflow: hidden;
}
.testimonials .card .layer {
position: absolute;
top: calc(100% - 3px);
width: 100%;
height: 100%;
left: 0;
background: linear-gradient(#034e70, #390375);
z-index: 1;
transition: 0.5s;
}
.testimonials .card:hover .layer {
top: 0;
}
.testimonials .card .content {
position: relative;
z-index: 2;
}
.testimonials .card .content p {
font-size: 18px;
line-height: 24px;
color: #FFF;
}
.testimonials .card .content .image {
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
margin-bottom: 16px;
box-shadow: 0 10px 20px rgba(0,0,0,.2);
}
.testimonials .card .content .details h2 {
font-size: 15px;
color: #fff;
}
.testimonials .card .content .details h2 span {
color: #03a9f4;
font-size: 12px;
transition: 0.5s;
}
.testimonials .card:hover .content .details h2 span {
color: #fff;
}
#media all and (max-width: 500px) {
.testimonials {
grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
}
.testimonials .card .content p {
width: 100%;
}
}
<section id="References">
<div class="section-title">
<h2>References</h2>
</div>
<div class="testimonials">
<!-- CARD 1 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim
egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 1 end-->
<!-- CARD 2 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim
egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 2 end-->
<!-- CARD 3 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim
egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 3 end-->
</div>
</section>

It's because you've set a fixed width of 350px for your element. When you make the window any smaller than ~370px wide, the fixed width prevents the element from getting any smaller. Try using relative sizes like % instead.

How to create a random changing paragraph with fade effects?

For a horror themed website I'm supposed to create a div that houses reviews.
I want the reviews to stay on screen for a couple of seconds before fading out and being replaced with another review. I kind of have an idea about how to get the desired effect using Jquery and absolute css placement, but I'm having trouble getting the code to do exactly what I want.
Some examples on google and this website have pushed me to the right direction I think, but none work very well for multiple paragraphs + random placement. (In case a visitor returns to the site, he's faced with different reviews the the last time)
I'm guessing I'll need an array..
$('#leftReview').fadeIn('fast').delay(1000).fadeOut('fast');
#ReviewContainer{
width: 400px;
height: 400px;
margin: 0 auto;
border: 2px solid white;
color: white;
background-color: #000;
position: relative;
}
.leftReview{
position:absolute;
top:0;
left:0;
width:400px;
height:400px;
}
<div id="ReviewContainer">
<div class="leftReview">
<h3>Review #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sem libero. Duis sit amet pretium sapien.</p>
</div>
<div class="leftReview">
<h3>Review #2</h3>
<p>Nam ut nunc id turpis consequat vestibulum eget sit amet arcu. Nullam nec pellentesque leo, eu pulvinar velit.</p>
</div>
<div class="leftReview">
<h3>Review #3</h3>
<p>Pellentesque sagittis justo sit amet odio commodo, in malesuada nulla elementum. Integer pretium, sem nec vehicula dapibus.</p>
</div>
<div class="leftReview">
<h3>Review #4</h3>
<p>Arcu elit scelerisque enim, vel tincidunt velit ex non dolor. Proin nec fringilla mi. Nunc commodo nulla vitae ipsum eleifend fermentum.</p>
</div>
</div>

To randomize the divs you need to use Math.random function to get a random number.
$(document).ready(function() {
setInterval(rotate,1200);
})
var panels = $('.leftReview');
var arr = [];
var rand = getRandom(panels.length);
panels.eq(rand).fadeIn();
function rotate() {
var visible = panels.filter(':visible').fadeOut(function() {
panels.eq(getRandom(panels.length)).fadeIn();
});
}
function getRandom(length) {
if (arr.length == length) {
arr = [];
}
var rand = Math.floor(Math.random() * length);
if (arr.indexOf(rand) > -1) {
return getRandom(length)
}
arr.push(rand)
return rand;
}
#ReviewContainer{
width: 400px;
height: 400px;
margin: 0 auto;
border: 2px solid white;
color: white;
background-color: #000;
position: relative;
}
.leftReview {
position:absolute;
top:0;
left:0;
width:400px;
height:400px;
display:none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ReviewContainer">
<div class="leftReview">
<h3>Review #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sem libero. Duis sit amet pretium sapien.</p>
</div>
<div class="leftReview">
<h3>Review #2</h3>
<p>Nam ut nunc id turpis consequat vestibulum eget sit amet arcu. Nullam nec pellentesque leo, eu pulvinar velit.</p>
</div>
<div class="leftReview">
<h3>Review #3</h3>
<p>Pellentesque sagittis justo sit amet odio commodo, in malesuada nulla elementum. Integer pretium, sem nec vehicula dapibus.</p>
</div>
<div class="leftReview">
<h3>Review #4</h3>
<p>Arcu elit scelerisque enim, vel tincidunt velit ex non dolor. Proin nec fringilla mi. Nunc commodo nulla vitae ipsum eleifend fermentum.</p>
</div>
</div>
http://jsbin.com/pojoke/edit?html,css,js

For make this, use setInterval event and make your div on display:none first
Please try
$(document).ready(function() {
var id = 0;
var carrousel = setInterval(rotate,1200);
function rotate(){
if(id != $('.leftReview').length){
$('.leftReview').eq(id).fadeIn(100).delay(1000).fadeOut(100)
id++;
}
}
})
#ReviewContainer{
width: 400px;
height: 400px;
margin: 0 auto;
border: 2px solid white;
color: white;
background-color: #000;
position: relative;
}
.leftReview{
position:absolute;
top:0;
left:0;
width:400px;
height:400px;
display:none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ReviewContainer">
<div class="leftReview">
<h3>Review #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sem libero. Duis sit amet pretium sapien.</p>
</div>
<div class="leftReview">
<h3>Review #2</h3>
<p>Nam ut nunc id turpis consequat vestibulum eget sit amet arcu. Nullam nec pellentesque leo, eu pulvinar velit.</p>
</div>
<div class="leftReview">
<h3>Review #3</h3>
<p>Pellentesque sagittis justo sit amet odio commodo, in malesuada nulla elementum. Integer pretium, sem nec vehicula dapibus.</p>
</div>
<div class="leftReview">
<h3>Review #4</h3>
<p>Arcu elit scelerisque enim, vel tincidunt velit ex non dolor. Proin nec fringilla mi. Nunc commodo nulla vitae ipsum eleifend fermentum.</p>
</div>
</div>
Update with random view
$(document).ready(function() {
var carrousel = setInterval(rotate,1200);
function rotate(){
id = Math.floor((Math.random() * $(".leftReview").length));
$('.leftReview').eq(id).fadeIn(100).delay(1000).fadeOut(100)
}
})
#ReviewContainer{
width: 400px;
height: 400px;
margin: 0 auto;
border: 2px solid white;
color: white;
background-color: #000;
position: relative;
}
.leftReview{
position:absolute;
top:0;
left:0;
width:400px;
height:400px;
display:none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ReviewContainer">
<div class="leftReview">
<h3>Review #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sem libero. Duis sit amet pretium sapien.</p>
</div>
<div class="leftReview">
<h3>Review #2</h3>
<p>Nam ut nunc id turpis consequat vestibulum eget sit amet arcu. Nullam nec pellentesque leo, eu pulvinar velit.</p>
</div>
<div class="leftReview">
<h3>Review #3</h3>
<p>Pellentesque sagittis justo sit amet odio commodo, in malesuada nulla elementum. Integer pretium, sem nec vehicula dapibus.</p>
</div>
<div class="leftReview">
<h3>Review #4</h3>
<p>Arcu elit scelerisque enim, vel tincidunt velit ex non dolor. Proin nec fringilla mi. Nunc commodo nulla vitae ipsum eleifend fermentum.</p>
</div>
</div>

CSS clearfix issue floating

I clearfixed parent element but I don't know how to fix this type of issue it's happening because I deduct the length of lorem lpsum from some container and it's misplacing.
#import url(https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
width:100vw;
height:100vh;
/*background-image: url(../images/background.svg);*/
background-color: #1abc9c;
box-sizing: border-box;
}
::selection {
color:#e74c3c;
background-color: #ecf0f1;
}
.container {
width:85vw;
height:auto;
margin:0 auto;
}
.container header {
background-color: rgb(236, 240, 241);
}
.container header::after {
content: "";
display: block;
clear:both;
}
.container header h1 {
float:left;
font-size: 3rem;
font-size: 4vw;
padding:1% 1%;
font-family: 'Amaranth', sans-serif;
}
.container header .m_link {
float:right;
padding:0.5vw;
}
.container header .m_link h4 {
font-family: 'Amaranth',sans-serif;
font-weight: 200;
color:#2c3e50;
font-size: 1rem;
font-size: 1vw;
}
.container header .m_link h4:nth-child(2) {
text-align: right;
}
.container section {
margin-top:1vw;
padding:0.1vw;
}
.container section::after {
display: table;
content:"";
clear:both;
}
.container section .wcon {
width: 19vw;
height:auto;
border:0.5vw solid #ecf0f1;
border-radius:1vw;
background-color: #ecf0f1;
float:left;
margin:0 0.6vw 0.6vw 0.6vw;
padding:0.5vw 0;
}
.container section .wcon:hover {
background-color: ;
border-color:#2c3e50;
cursor: pointer;
}
.container section .wcon:after {
clear: both;
display: table;
content:"";
}
.container section .wcon .img_icon {
display: block;
margin:0 auto;
width:18vw;
height: auto;
}
.container section .wcon h3 {
font-family: 'Titillium Web',sans-serif;
text-align: center;
font-size: 1.5rem;
font-size: 2vw;
font-weight: 500;
color:#2c3e50;
text-transform: uppercase;
padding:0.1vw 0;
}
.container section .wcon p {
text-align: justify;
font-size: 0.8rem;
font-size: 1vw;
font-family: 'Titillium Web',sans-serif;
font-weight: 100;
padding:0 0.2vw;
line-height: 1.3;
color:#34495e;
}
.container section .wcon p:after {
content:" Read More";
}
<DOCTYPE html>
<html>
<head>
<title> Projects </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<header>
<h1> Projects </h1>
</header>
</div>
<div class="container">
<section>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.
</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.
</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate . </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, . </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
</section>
</div>
</body>
</html>

clear is a CSS property related to floats. Mainly about preceding floats.
clearfix is a concept, to contain (descending) floats. See SO answers about What is clearfix?
No need of JS in 2015 to do that! An HTML solution with .clear is fine except if you've a lot of breakpoints and situations to manage. Then you'd need different classes like .small-clear there, .large-clear.clear here, etc where prefixes are used as a reminder of which breakpoint they should apply.
Here are 3 solutions in pure CSS:
Using CSS3 :nth-child(an+b) (compatibility: IE9+) to add clear: left every 4 items:
#import url(https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
width:100vw;
height:100vh;
/*background-image: url(../images/background.svg);*/
background-color: #1abc9c;
box-sizing: border-box;
}
::selection {
color:#e74c3c;
background-color: #ecf0f1;
}
.container {
width:85vw;
height:auto;
margin:0 auto;
}
.container header {
background-color: rgb(236, 240, 241);
}
.container header::after {
content: "";
display: block;
clear:both;
}
.container header h1 {
float:left;
font-size: 3rem;
font-size: 4vw;
padding:1% 1%;
font-family: 'Amaranth', sans-serif;
}
.container header .m_link {
float:right;
padding:0.5vw;
}
.container header .m_link h4 {
font-family: 'Amaranth',sans-serif;
font-weight: 200;
color:#2c3e50;
font-size: 1rem;
font-size: 1vw;
}
.container header .m_link h4:nth-child(2) {
text-align: right;
}
.container section {
margin-top:1vw;
padding:0.1vw;
}
.container section::after {
display: table;
content:"";
clear:both;
}
.container section .wcon {
width: 19vw;
height:auto;
border:0.5vw solid #ecf0f1;
border-radius:1vw;
background-color: #ecf0f1;
float:left;
margin:0 0.6vw 0.6vw 0.6vw;
padding:0.5vw 0;
}
.container section .wcon:nth-child(4n+1) {
clear: left;
}
.container section .wcon:hover {
background-color: ;
border-color:#2c3e50;
cursor: pointer;
}
.container section .wcon:after {
clear: both;
display: table;
content:"";
}
.container section .wcon .img_icon {
display: block;
margin:0 auto;
width:18vw;
height: auto;
}
.container section .wcon h3 {
font-family: 'Titillium Web',sans-serif;
text-align: center;
font-size: 1.5rem;
font-size: 2vw;
font-weight: 500;
color:#2c3e50;
text-transform: uppercase;
padding:0.1vw 0;
}
.container section .wcon p {
text-align: justify;
font-size: 0.8rem;
font-size: 1vw;
font-family: 'Titillium Web',sans-serif;
font-weight: 100;
padding:0 0.2vw;
line-height: 1.3;
color:#34495e;
}
.container section .wcon p:after {
content:" Read More";
}
<DOCTYPE html>
<html>
<head>
<title> Projects </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<header>
<h1> Projects </h1>
</header>
</div>
<div class="container">
<section>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.
</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.
</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate . </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, . </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
</section>
</div>
</body>
</html>
Now a display: inline-block solution, with vertical-align: top instead of default baseline (great for text and content, not for layout ;) ).
Compatibility is at least IE8+ (and less with some hacks but who cares anymore?):
#import url(https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
width:100vw;
height:100vh;
/*background-image: url(../images/background.svg);*/
background-color: #1abc9c;
box-sizing: border-box;
}
::selection {
color:#e74c3c;
background-color: #ecf0f1;
}
.container {
width:85vw;
height:auto;
margin:0 auto;
}
.container header {
background-color: rgb(236, 240, 241);
}
.container header::after {
content: "";
display: block;
clear:both;
}
.container header h1 {
float:left;
font-size: 3rem;
font-size: 4vw;
padding:1% 1%;
font-family: 'Amaranth', sans-serif;
}
.container header .m_link {
float:right;
padding:0.5vw;
}
.container header .m_link h4 {
font-family: 'Amaranth',sans-serif;
font-weight: 200;
color:#2c3e50;
font-size: 1rem;
font-size: 1vw;
}
.container header .m_link h4:nth-child(2) {
text-align: right;
}
.container section {
display: table;
margin-top:1vw;
padding:0.1vw;
}
.container section::after {
display: table;
content:"";
clear:both;
}
.container section .wcon {
display: inline-block;
vertical-align: top;
width: 19vw;
height:auto;
border:0.5vw solid #ecf0f1;
border-radius:1vw;
background-color: #ecf0f1;
margin-bottom: 0.6vw
/* Margins ruined. You must take into account 4px gap due to whitespace or better remove whitespace from HTML code
margin:0 0.6vw 0.6vw 0.6vw;*/
padding:0.5vw 0;
}
.container section .wcon:hover {
background-color: ;
border-color:#2c3e50;
cursor: pointer;
}
.container section .wcon:after {
clear: both;
display: table;
content:"";
}
.container section .wcon .img_icon {
display: block;
margin:0 auto;
width:18vw;
height: auto;
}
.container section .wcon h3 {
font-family: 'Titillium Web',sans-serif;
text-align: center;
font-size: 1.5rem;
font-size: 2vw;
font-weight: 500;
color:#2c3e50;
text-transform: uppercase;
padding:0.1vw 0;
}
.container section .wcon p {
text-align: justify;
font-size: 0.8rem;
font-size: 1vw;
font-family: 'Titillium Web',sans-serif;
font-weight: 100;
padding:0 0.2vw;
line-height: 1.3;
color:#34495e;
}
.container section .wcon p:after {
content:" Read More";
}
<DOCTYPE html>
<html>
<head>
<title> Projects </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<header>
<h1> Projects </h1>
</header>
</div>
<div class="container">
<section>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.
</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.
</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate . </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, . </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
</section>
</div>
</body>
</html>
And finally an IE10+ solution with flexbox. Equal height items for free ;) :
small print: you'll need Autoprefixer or an online tool like http://pleeease.io/play/ in order to write all the needed syntaxes of Flexbox (there've been 3 specs since 2009-2010 ;) )
#import url(https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
width:100vw;
height:100vh;
/*background-image: url(../images/background.svg);*/
background-color: #1abc9c;
box-sizing: border-box;
}
::selection {
color:#e74c3c;
background-color: #ecf0f1;
}
.container {
width:85vw;
height:auto;
margin:0 auto;
}
.container header {
background-color: rgb(236, 240, 241);
}
.container header::after {
content: "";
display: block;
clear:both;
}
.container header h1 {
float:left;
font-size: 3rem;
font-size: 4vw;
padding:1% 1%;
font-family: 'Amaranth', sans-serif;
}
.container header .m_link {
float:right;
padding:0.5vw;
}
.container header .m_link h4 {
font-family: 'Amaranth',sans-serif;
font-weight: 200;
color:#2c3e50;
font-size: 1rem;
font-size: 1vw;
}
.container header .m_link h4:nth-child(2) {
text-align: right;
}
.container section {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top:1vw;
padding:0.1vw;
}
.container section::after {
display: table;
content:"";
clear:both;
}
.container section .wcon {
width: 19vw;
height:auto;
border:0.5vw solid #ecf0f1;
border-radius:1vw;
background-color: #ecf0f1;
margin:0 0.6vw 0.6vw 0.6vw;
padding:0.5vw 0;
}
.container section .wcon:nth-child(4n+1) {
clear: left;
}
.container section .wcon:hover {
background-color: ;
border-color:#2c3e50;
cursor: pointer;
}
.container section .wcon:after {
clear: both;
display: table;
content:"";
}
.container section .wcon .img_icon {
display: block;
margin:0 auto;
width:18vw;
height: auto;
}
.container section .wcon h3 {
font-family: 'Titillium Web',sans-serif;
text-align: center;
font-size: 1.5rem;
font-size: 2vw;
font-weight: 500;
color:#2c3e50;
text-transform: uppercase;
padding:0.1vw 0;
}
.container section .wcon p {
text-align: justify;
font-size: 0.8rem;
font-size: 1vw;
font-family: 'Titillium Web',sans-serif;
font-weight: 100;
padding:0 0.2vw;
line-height: 1.3;
color:#34495e;
}
.container section .wcon p:after {
content:" Read More";
}
<DOCTYPE html>
<html>
<head>
<title> Projects </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<header>
<h1> Projects </h1>
</header>
</div>
<div class="container">
<section>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.
</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.
</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate . </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, . </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
</section>
</div>
</body>
</html>

When I have those issues I use to add to the html "clear" div`s. In your case every 4 elements I would include:
<div class="clear"></div>
Where clearclass just have:
.clear {clear:both;}
Probably you may want to do your web responsive as you are not using fixed width, so you could even include more div'sbetween your elements with display:none and clearto make them "visibles" when reaching your viewport width.
as an example I have added a second div like:
<div class="clear2"></div>
every 2 elements with these css:
.clear2 {clear:both; display:none;}
#media only screen and (max-width: 650px) {
.container section .wcon {width:47%;} /*
.clear2 {display:block;}
}
(47% is just a fast aproach for 2 elements per row)
JSFIDDLE
Edit: another aproach would be calculate (if the text is going to be, as it looks, dinamic) the max-height of your tallest element and apply that height to all your elements. with this jquery:
$(document).ready(function() {
var maxHeight = -1;
$('.wcon').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$('.wcon').each(function() {
$(this).height(maxHeight);
});
});
Credit to #ghayes in this link
JSFIDDLE

Showing a div only when a certain div's height is > than set height?

I have a tabbing module I created that has scrollable content areas. I made a quick blinking arrow style to let the users know that this box is scrollable. I would like to make it so this div is only visible if my content (scrollable text box area) is above a certain height.
For example, my scrollable area is always set to height:450px. So I need a way to figure out how to get the height of the content area, then if is less than 450px height, to not show my div more-info.
Here is a jsfiddle with a working demo.
HTML Structure
<div class="tabs-left app-about-page">
<div class="more-info"></div>
<ul class="nav nav-tabs">
<li class="active"><span class="glyphicon glyphicon-heart">Donor Acquisition</span></li>
<li><span class="glyphicon glyphicon-star">Donor Cultivation</span></li>
<li><span class="glyphicon glyphicon-headphones">Donor Retention</span></li>
<li><span class="glyphicon glyphicon-time">Donor Blogging</span></li>
<li><span class="glyphicon glyphicon-calendar">Donor Engagement</span></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">
</div>
<div class="tab-pane" id="b">
</div>
<div class="tab-pane" id="c">
</div>
<div class="tab-pane" id="d">
</div>
<div class="tab-pane" id="e">
</div>
</div><!-- /tab-content -->
</div><!-- /tabbable -->
From some searching and piecing together, I found something like this, so assume this is the starting point.
$(document).ready(function () {
if ($(".tab-pane").height() > 450 {
jQuery(".more-info").fadeIn(200);
} else {
jQuery(".more-info").hide(100);
});

Just make use of the shown.bs.tab event, to show and hide your arrow div.
Togglable tabs Events
shown.bs.tab
This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
$('.more-info').css('display', 'none');
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var activeContentElem = $($(e.target).attr('href'));
if (activeContentElem[0].scrollHeight > activeContentElem.height()) {
$('.more-info').css('display', 'block');
} else {
$('.more-info').css('display', 'none');
}
})
.nav-tabs {
float: left;
border-bottom: 0;
}
.nav-tabs li {
float: none;
margin: 0;
width: 106px;
height: 106.5px;
left: -30px;
top: -20px;
position: relative;
display: block;
background-color: #F2F2F0;
margin-top: 0;
border-bottom: #FFF 2px solid;
text-align: center;
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-ms-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
.nav-tabs li:last-child{
border:none;
}
.nav-tabs li a{
display: block;
height: 75px;
position: relative;
padding-top: 31px;
font-size: 14px;
color:rgb(51, 51, 51);
text-decoration: none;
}
.nav-tabs li:hover {
background-color: #DBDBDA;
cursor:pointer;
}
.nav-tabs > li.active, .nav-tabs > li.active a, .nav-tabs > li a:active, .nav-tabs > li.active > li:focus, .nav-tabs >li a:focus {
background:rgba(51, 181, 229, 0.45);
color:#FFF;
text-decoration: none;
}
.tab-content {
margin-left: 45px;
}
.tab-content .tab-pane {
display: none;
background-color: #fff;
padding: 0;
overflow-y: auto;
}
.tab-pane p{
margin: 0 0 16px 0;
}
.tab-pane p:first-child{
margin:5px 0 16px;
}
.tab-pane h1{
padding-bottom: 5px;
border-bottom: 1px solid #DBDBDA;
margin-bottom: 16px;
}
.tab-pane img{
max-width: 70%;
}
.tab-content .active {
display: block;
overflow: scroll;
height: 450px !important;
padding: 0px 15px 0 0px;
}
.list-group {
width: 100%;
}
.list-group .list-group-item {
height: 50px;
}
.list-group .list-group-item h4, .list-group .list-group-item span {
line-height: 11px;
}
#-webkit-keyframes circleBounce {
0% {-webkit-transform: scale(0.9); opacity: 0;}
20% {opacity: 0.5;}
50% {opacity: 1;}
80% {opacity: 0.5;}
100% {-webkit-transform: scale(1.1); opacity:0;}
}
.more-info {
position: absolute;
bottom: 30px;
left: calc(50% - 3px);
width: 6px;
height: 6px;
border: 2px solid rgb(51, 181, 229);
border-top: none;
border-left: none;
-webkit-transform: rotate(45deg);
-webkit-transform-origin: 50% 50%;
}
.more-info:after {
content: "";
display: block;
position: absolute;
top: calc(50% - 17px);
left: calc(50% - 17px);
width: 35px;
height: 35px;
border: 1px solid rgba(255,255,255,.8);
border: 1px solid rgb(51, 181, 229);
border-radius: 50%;
-webkit-animation: circleBounce 2.5s linear infinite;
}
.more-info:hover:after {
background-color: rgba(51, 181, 229, .15);
cursor:inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="tabs-left app-about-page">
<div class="more-info"></div>
<ul class="nav nav-tabs">
<li class="active"><span class="glyphicon glyphicon-heart">Donor Acquisition</span></li>
<li><span class="glyphicon glyphicon-star">Donor Cultivation</span></li>
<li><span class="glyphicon glyphicon-headphones">Donor Retention</span></li>
<li><span class="glyphicon glyphicon-time">Donor Blogging</span></li>
<li><span class="glyphicon glyphicon-calendar">Donor Engagement</span></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">
<h1>Donor Acquisition</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
</div>
<div class="tab-pane" id="b">
<h1>Donor Cultivation</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
</div>
<div class="tab-pane" id="c">
<h1>Donor Retention</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
</div>
<div class="tab-pane" id="d">
<h1>Nonprofit Blogging</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
</div>
<div class="tab-pane" id="e">
<h1>Nonprofit Engagement</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
</div>
</div><!-- /tab-content -->
</div><!-- /tabbable -->

First, start your .more-info class as hidden in css.
Then, you could check the height of the content of your tab every time the visible tab changes, and if it is greater than 450px, swap visibility of your more info button.
This is the jQuery snippet:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var div = $($(e.target).attr('href'));
$('.more-info').hide();
if (div.get(0).scrollHeight > 450)
$('.more-info').show();
});

I'm not sure here, but I looked around some more and came up with this.
var clientHeight = document.getElementById('myDiv').clientHeight;
and some combination of this..
[DIV].style.visibility='visible'
[DIV].style.visibility='hidden'
then use an if statement?
Kind of new to coding, but maybe this is on the right track.

You could bind an event to your menu anchors that checks the height of your active div against the scroll height of that div and show or hides the blinking arrow.
Using JQuery, something like this so that it triggers after your bootstrap finishes:
$(document).ready(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function (){
ToggleMoreInfoArrow();
//Call the toggle every time the content changes.
});
ToggleMoreInfoArrow(); //Call it the first time the page loads.
});
function ToggleMoreInfoArrow()
{
if( $('div.active').prop('scrollHeight') < $('div.active').height())
{
$('.more-info').hide();
}
else
{
$('.more-info').show();
}
}
Edit: I'm not sure how your "active" class gets set, but you'd want to run the height check code after that happens. This could be on page load or wherever, the if statement is the important bit.
Edit: See this working fiddle: http://jsfiddle.net/9hkpzagz/7/

Hello multinumbered user, I didn't like the script there was in example, and I changed the CSS a bit, moving "more" button to the right bottom corner, but I did the following:
1. you should always have .tab-pane to be of the set height on start and not scrolled, so I changed the CSS to be "overflow: hidden"
I wrote a function that checks the height of tab content and either activate or desactivate "more"
If "more" button is clicked, the tab content CSS 'overflow-y' option is changed to 'auto' - this adds vertical scrollbar.
http://jsfiddle.net/9hkpzagz/8/
here is my js code:
function checkHeightAndSetMore(clickedMore){
var activeTabH=$('.tab-content .active').height();
if(activeTabH >450){
$('div.more-info').fadeIn();
}
else{
$('div.more-info').fadeOut();
}
if(clickedMore == 1){
$('.tab-content .active').css('overflow-y', 'auto');
$('div.more-info').fadeOut();
}
}
$(document).ready(function(){
checkHeightAndSetMore(0);
$('.more-info').click(function(){
checkHeightAndSetMore(1);
});
});

Force text in the child div fit into parent

I have two div tags in my HTML code like this
<div id="parent">
<div id="child">
<p class="child-text"> ..... </p>
<a class="child-link"> ..... </a>
<p class="child-text"> ..... </p>
</div>
</div>
#parent{ height: 400px; width:100px}
How can force the content of #child div vertically fit into the parent div ?
I am looking for some thing that can take child div ID and resize its content dynamically. I have worked with jQuery.fittext. However, it get the child-text class id instead of child div id. In other words, it is not intelligent enough to identify what is in the child div and then rescale them.
Is there any other alternative for this ?

You could do something like:
var fontsize = 10;
while($('#child').height() <= $('#parent').height()){
fontsize = fontsize +1;
$('#child').css('font-size',fontsize+'px');
}
#parent{ height: 400px; width:100px;background:red;}
#child{padding-bottom:5px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="parent">
<div id="child">
<p class="child-text"> Once upon a time </p>
<a class="child-link"> there lived a monkey</a>
<p class="child-text"> who loved to eat oranges </p>
</div>
</div>
While #child height is less then #parent then it adds 1px until it is not. In the css, I gave #child a padding bottom of 5px, so it would not overflow
JSFiddle

Add a display property value of table to #parent and display property value of table-cell to the elements you want to measure the height of #parent
#parent, #child {
width: 100%;
height: 100%;
position: relative;
display: table;
}
.child-link, .child-text { /* ID/Class of whatever element you want to measure the #parent */
display: inline-block;
height: 100%;
width: 150px;
vertical-align: top;
background-color: green;
bottom: 0;
display: table-cell;
border-left: solid 5px white; /* Just for Division sake */
}
<div id="parent">
<div id="child"><p class="child-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit. </p>
<a class="child-link"> Lorem </a>
<p class="child-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit.</p>
</div>
</div>
To make it dependent on the screen size, do something like below:
#media screen and (max-width: 768px) { /* Adjust as needed */
enter code here
}