When hover over .card I want the .video to appear but it is not working. What do I need to change?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
html {
scroll-behavior: smooth;
}
#media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* header */
header {
height: 509px;
}
header h1 {
color: #fff;
font-size: 60px;
padding-bottom: 20px;
font-weight: 900;
}
header p {
color: #ffffffb5;
font-size: 20px;
line-height: 1.7;
padding-bottom: 20px;
}
header a i {
font-size: 60px;
color: #ffffff87;
transition: all .2s ease-in;
}
header a i:hover {
font-size: 60px;
color: #ffffff;
}
/* header */
/* media query for header section */
#media (max-width:767px) {
header video {
display: none;
}
header {
background: url(images/banner.jpg);
}
header h1 {
color: #fff;
font-size: 40px;
padding-bottom: 20px;
font-weight: 900;
}
header p {
color: #ffffffb5;
font-size: 18px;
line-height: 1.7;
padding-bottom: 20px;
}
}
/* media query for header section */
/* cards */
.cards {
background-color: #202024;
overflow: hidden;
padding-bottom: 30px;
}
.cards .video {
position: fixed;
top: 15%;
left: 20%;
display: none;
}
.cards .video .card:hover {
position: fixed;
top: 15%;
left: 20%;
display: block;
}
.cards .card {
width: 30.3333%;
background-color: #2C2C32;
overflow: hidden;
margin-right: 3%;
margin-bottom: 3%;
border-radius: 5px;
}
.cards .card .image {
width: 100%;
}
.cards .card .image img {
width: 100%;
cursor: pointer;
}
.cards .card h2 {
color: #fff;
font-size: 19px;
padding: 23px;
}
.cards .card p {
padding: 0 15px 30px;
color: #ffffffa8;
line-height: 1.3;
font-size: 17px;
}
.cards .card .btn {
padding-bottom: 25px;
}
.cards .card .btn button {
padding: 10px 0;
color: #fff;
background-color: #82CEC6;
border: none;
border-radius: 5px;
font-size: 15px;
width: 75%;
}
/* media query for cards section */
#media (max-width:767px) {
.cards {
padding: 30px;
}
.cards .card {
width: 100%;
margin-bottom: 35px;
}
}
/* media query for cards section */
/* footer */
footer {
background-color: #1B1B1F;
color: #fff;
}
footer .container .upper h2 {
font-size: 25px;
padding-bottom: 30px;
}
footer .container .upper p{
font-size: 15px;
padding-bottom: 30px;
line-height: 1.4;
color: #a5a7a7;
}
footer .container .lower .icons i {
color: #605d5da8;
border: 1px solid #605d5da8;
border-radius: 50%;
margin: 0 10px 30px 10px;
font-size: 20px;
cursor: pointer;
transition: all .2s ease-in;
}
footer .container .lower .icons i:hover {
color: #fff;
border: 1px solid #605d5da8;
border-radius: 50%;
margin: 0 10px 30px 10px;
font-size: 20px;
}
footer .container .lower .icons i:first-of-type {
padding: 13px 16px;
}
footer .container .lower .icons i:not(:first-of-type){
padding: 13px 13px; }
footer .container .lower .copyright {
color: #a7a7a7a7;
}
/* footer */
/* media query for footer section */
#media (max-width:767px) {
footer {
padding: 20px 0;
}
}
/* media query for footer section */
/*my frame work */
.flex-row {
display: flex;
justify-content: space-around;
align-items: center;
}
.flex-col {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.text-center {
text-align: center;
}
.float-l {
float: left;
}
.container {
padding: 5% 8% 5% 8%;
}
/*my frame work */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Motion</title>
<script src="https://kit.fontawesome.com/11e8366046.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="motion.css">
</head>
<body>
<!--Header-->
<header class="flex-col" >
<video src="images/banner.mp4" autoplay="true" loop="true" style="width: 100%; z-index: -1000; position: fixed; top: 0; left: 0; "></video>
<div class="container">
<div class="text-center">
<h1>Full Motion</h1>
<p>A responsive video gallery template with a functional lightbox <br>
designed by Templated and released under the Creative Commons License</p>
</div>
<div class="text-center">
</i>
</div>
</div>
</header>
<!--Header-->
<!--cards-->
<div class="cards text-center" id="cards">
<div class="container">
<div class="video"><iframe width="800" height="467" src="https://www.youtube.com/embed/s6zR2T9vn2c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="card float-l">
<div class="image">
<img src="images/pic01.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic02.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic03.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic04.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic05.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic06.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
</div>
</div>
<!--cards-->
<!--footer-->
<footer class="text-center">
<div class="container">
<div class="upper ">
<h2>Etiam veroeros lorem</h2>
<p>Pellentesque eleifend malesuada efficitur. Curabitur volutpat dui mi, ac imperdiet dolor tinciduntnec. Ut <br> erat lectus, dictum sit amet lectus a, aliquet rutrum mauris. Etiam nec lectus hendrerit , consectetur<br> risus viverra, iaculis orci. Phasellus eu nibh ut mi luctus auctor. Donec sit amet dolor in diam feugiat <br> venenatis. </p>
</div>
<div class="lower ">
<div class="icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<div class="copyright">©<span>Untitled. Design: TEMPLATED. Images: Unsplash. Videos: Coverr.</span></div>
</div>
</div>
</footer>
<!--footer-->
</body>
</html>
First of: if you want to show any element (as well as a video) when hovering a card, then you need to put that element inside the HTML of the card. You failed to do that.
Also: you need to have the correct order of 'CSS selectors' to make that element visible when the .card gets hovered. Your original code .cards .video .card:hover fails to do that as it means: when from .cards and .video a .card:hover then show video.
What you need is: if from .cards a card:hover then show .video.
Also: when you want to position an element inside a parent you have to make .parent { position: relative } and its child .child { position: absolute }. Currently you use .child { position: fixed }. And without making the parent relative, the video is positioned somewhere on the screen (viewport) instead of the card (when all was working well, that is).
Lastly: the <iframe> you use is a child of <div> .video, so if you want to be able to size .video to your needs, you will need to make the <iframe> fully fill its parent (.video).
Plus: I changed the default background-color of the <header> to 'black' to make its content visible when there is no image.
To top it off: I added a <a> to the 'Watch'-button to open the movie on YouTube.
The below snippet has both the corrected HTML and proper CSS to show a video when the first card is hovered.
Note on SO the video in the card is still not visible, so I created a Fiddle to show that it works (the first card only, I leave the rest up to you).
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
html {
scroll-behavior: smooth;
}
#media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* header */
header {
height: 509px;
background-color: black;
}
header h1 {
color: #fff;
font-size: 60px;
padding-bottom: 20px;
font-weight: 900;
}
header p {
color: #ffffffb5;
font-size: 20px;
line-height: 1.7;
padding-bottom: 20px;
}
header a i {
font-size: 60px;
color: #ffffff87;
transition: all .2s ease-in;
}
header a i:hover {
font-size: 60px;
color: #ffffff;
}
/* header */
/* media query for header section */
#media (max-width:767px) {
header video {
display: none;
}
header {
background-image: url(images/banner.jpg); /* MOD from 'background' */
background-color: black;
}
header h1 {
color: #fff;
font-size: 40px;
padding-bottom: 20px;
font-weight: 900;
}
header p {
color: #ffffffb5;
font-size: 18px;
line-height: 1.7;
padding-bottom: 20px;
}
}
/* media query for header section */
/* cards */
.cards {
background-color: #202024;
overflow: hidden;
padding-bottom: 30px;
}
/* REMOVE THIS CODE
.cards .video {
position: fixed;
top: 15%;
left: 20%;
display: none;
}
.cards .video .card:hover {
position: fixed;
top: 15%;
left: 20%;
display: block;
}
END REMOVE */
/* And ADD */
iframe {
border: none; /* remove default border */
width: 100%; /* stretch to fill parent container */
height: 100%;
}
.cards .card {
position: relative; /* child content must be positioned inside this */
/* => a new 'stacking context' */
}
.cards .card .video {
display: none; /* hidden by default */
}
.cards .card:hover .video { /* when a card is hovered then show video */
position: absolute; /* position this element within a 'relative' parent */
top : 0; /* fully occupy the parent space */
right : 0;
left : 0;
bottom: 5rem; /* up to some position above `watch` button */
display: block; /* make it visible */
}
.cards .card .btn a {
text-decoration: none;
color: currentColor
}
/* End ADD */
.cards .card {
width: 30.3333%;
background-color: #2C2C32;
overflow: hidden;
margin-right: 3%;
margin-bottom: 3%;
border-radius: 5px;
}
.cards .card .image {
width: 100%;
}
.cards .card .image img {
width: 100%;
cursor: pointer;
}
.cards .card h2 {
color: #fff;
font-size: 19px;
padding: 23px;
}
.cards .card p {
padding: 0 15px 30px;
color: #ffffffa8;
line-height: 1.3;
font-size: 17px;
}
.cards .card .btn {
padding-bottom: 25px;
}
.cards .card .btn button {
padding: 10px 0;
color: #fff;
background-color: #82CEC6;
border: none;
border-radius: 5px;
font-size: 15px;
width: 75%;
}
/* media query for cards section */
#media (max-width:767px) {
.cards {
padding: 30px;
}
.cards .card {
width: 100%;
margin-bottom: 35px;
}
}
/* media query for cards section */
/* footer */
footer {
background-color: #1B1B1F;
color: #fff;
}
footer .container .upper h2 {
font-size: 25px;
padding-bottom: 30px;
}
footer .container .upper p{
font-size: 15px;
padding-bottom: 30px;
line-height: 1.4;
color: #a5a7a7;
}
footer .container .lower .icons i {
color: #605d5da8;
border: 1px solid #605d5da8;
border-radius: 50%;
margin: 0 10px 30px 10px;
font-size: 20px;
cursor: pointer;
transition: all .2s ease-in;
}
footer .container .lower .icons i:hover {
color: #fff;
border: 1px solid #605d5da8;
border-radius: 50%;
margin: 0 10px 30px 10px;
font-size: 20px;
}
footer .container .lower .icons i:first-of-type {
padding: 13px 16px;
}
footer .container .lower .icons i:not(:first-of-type){
padding: 13px 13px; }
footer .container .lower .copyright {
color: #a7a7a7a7;
}
/* footer */
/* media query for footer section */
#media (max-width:767px) {
footer {
padding: 20px 0;
}
}
/* media query for footer section */
/*my frame work */
.flex-row {
display: flex;
justify-content: space-around;
align-items: center;
}
.flex-col {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.text-center {
text-align: center;
}
.float-l {
float: left;
}
.container {
padding: 5% 8% 5% 8%;
}
<html>
<head>
<meta charset="UTF-8">
<title>Motion</title>
<script src="https://kit.fontawesome.com/11e8366046.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="motion.css">
</head>
<body>
<!--Header-->
<header class="flex-col" >
<video src="images/banner.mp4" autoplay="true" loop="true" style="width: 100%; z-index: -1000; position: fixed; top: 0; left: 0; "></video>
<div class="container">
<div class="text-center">
<h1>Full Motion</h1>
<p>A responsive video gallery template with a functional lightbox <br>
designed by Templated and released under the Creative Commons License</p>
</div>
<div class="text-center">
</i>
</div>
</div>
</header>
<!--Header-->
<!--cards-->
<div class="cards text-center" id="cards">
<div class="container">
<div class="card float-l">
<div class="video"><iframe src="https://www.youtube.com/embed/s6zR2T9vn2c" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="image">
<img src="images/pic01.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button><a rel="noopener" target="_blank" href="https://www.youtube.com/watch?v=s6zR2T9vn2c">Watch</a></button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic02.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic03.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic04.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic05.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic06.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
</div>
</div>
<!--cards-->
<!--footer-->
<footer class="text-center">
<div class="container">
<div class="upper ">
<h2>Etiam veroeros lorem</h2>
<p>Pellentesque eleifend malesuada efficitur. Curabitur volutpat dui mi, ac imperdiet dolor tinciduntnec. Ut <br> erat lectus, dictum sit amet lectus a, aliquet rutrum mauris. Etiam nec lectus hendrerit , consectetur<br> risus viverra, iaculis orci. Phasellus eu nibh ut mi luctus auctor. Donec sit amet dolor in diam feugiat <br> venenatis. </p>
</div>
<div class="lower ">
<div class="icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<div class="copyright">©<span>Untitled. Design: TEMPLATED. Images: Unsplash. Videos: Coverr.</span></div>
</div>
</div>
</footer>
<!--footer-->
</body>
</html>
Related
So I have this card where the title of it"DcBlog" is in the same line with the content "My Cool Server", I don't want it like that ,but I can't solve this problem
.cards div:first-child {
border-radius: 10px 10px 0 0;
}
.cards div:last-child {
border-radius: 0 0 10px 10px;
margin-bottom:10px;
}
.card {
background-color: #212121;
border-radius:0 0 0 0;
}
.card .btn {
background-color:#d41950;
color:white;
outline:none;
border: none;
}
.card-title {
color:#d89e45;
margin-left:10px;
}
.card-top{
display: flex;
align-items:center;
}
.card-icon {
width:100px;
height:100px;
border-radius:50%;
}
<div class="card" style="width: 100%">
<div class="card-body">
<div class="card-top">
<img class="card-icon" src="https://cdn.discordapp.com/icons/888480205709144084/157cff143fe47dbf7d291a37dc6164dd.png">
<h5 class="card-title">dcblog</h5>
<div class="container">
<p class="card-text">My Cool Server</p>
</div>
</div>
Go somewhere
</div>
</div>
and I want to make the title and the content of the card in different lines,like this one:
how can I do that?
I believe this Fiddle does what you want.
Essentially, you want to use Flexbox for the left part.
Right part will stack naturally.
HTML
<div class="card">
<div class="left-side">
<img src="https://cdn.discordapp.com/icons/888480205709144084/157cff143fe47dbf7d291a37dc6164dd.png"/> Go somewhere
</div>
<div class="right-side">
<div class="top">
<h1>Dcblog</h1>
<h2>My cool server</h2>
</div>
<div class="bot">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nunc nisl, luctus a magna sit amet, pharetra euismod tortor. Suspendisse ut eros nisl. Morbi luctus lacus sit amet consectetur suscipit. Suspendisse vitae est erat. Integer in tincidunt tortor.
</p>
</div>
</div>
</div>
CSS
.card {
display: flex;
padding: 10px;
background-color: #212121;
}
.left-side {
display: flex;
flex-direction: column;
align-items: center;
}
.left-side > a {
color: #FFF;
background-color: #d41950;
width: 100%;
margin-top: 10px;
text-align: center;
text-decoration: none;
padding-top: 5px;
padding-bottom: 5px;
}
.right-side {
padding-left: 10px;
}
.top > h1 {
margin: 0;
color: #d89e45;
}
.top > h2 {
margin: 0;
color: #FFF;
}
.bot > p {
color: #DDD;
}
I was making the "our team " section of a website. I checked my progress via "visual code studio live server".Everything worked properly. After closing vs code, I clicked the HTML file from file explorer and it opened in google chrome. Then the flexbox container became small and also flex items also became small. Why different result shows when I see the webpage from file explorer and when I see from vs code live server extension
body {
margin: 0;
padding: 0;
background: #f79256;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
box-sizing: border-box;
}
.team {
height: auto;
margin: 1% 1%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.card-container {
width: 220px;
height: 350px;
background: #f2f5ff;
border-radius: 6px;
box-shadow: 0px 0px 10px 1px #000;
overflow: hidden;
display: inline-block;
margin-bottom: 05px;
margin: 05px;
}
div.upper-container {
height: 90px;
background-color: #00b2ca;
}
.image-container {
background-color: #f79256;
width: 80px;
height: 80px;
border-radius: 50%;
padding: 5px;
transform: translate(70px, 45px);
}
.image-container img {
width: 80px;
height: 80px;
border-radius: 100%;
margin: 0 auto;
}
.lower-container {
height: 280px;
background-color: #1d4e89;
padding-top: 20px;
text-align: center;
}
.lower-container h3,
.lower-container h4 {
box-sizing: border-box;
line-height: 0.6;
font-weight: lighter;
}
.lower-container h3 {
padding-top: 20px;
color: #fbd1a2;
}
.lower-container h4 {
color: #fbd1a2;
}
.lower-container p {
font-size: 16px;
color: #00b2ca;
padding: 0 10px;
}
.lower-container .btn {
text-decoration: none;
background-color: #fbd1a2;
color: #1d4e89;
padding: 05px 20px;
margin-top: 15px;
font-weight: bold;
border-radius: 10px;
transition: all 0.5s;
}
.lower-container .btn:hover {
letter-spacing: 3px;
font-weight: lighter;
color: #00b2ca;
}
<!DOCTYPE html>
<html>
<head>
<title>Profile Card</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="team">
<div class="card-container">
<div class="upper-container">
<div class="image-container">
<img src="Person/3.jpg" />
</div>
</div>
<div class="lower-container">
<div>
<h3>Alaina Wick</h3>
<h4>Front-end Developer</h4>
</div>
<div>
<p>
sodales accumsan ligula. Aenean sed diam tristique, fermentum mi nec, ornare arcu.
</p>
</div>
<div>
View profile
</div>
</div>
</div>
<div class="card-container">
<div class="upper-container">
<div class="image-container">
<img src="Person/2.jpg" />
</div>
</div>
<div class="lower-container">
<div>
<h3>Alaina Wick</h3>
<h4>Front-end Developer</h4>
</div>
<div>
<p>
sodales accumsan ligula. Aenean sed diam tristique, fermentum mi nec, ornare arcu.
</p>
</div>
<div>
View profile
</div>
</div>
</div>
<div class="card-container">
<div class="upper-container">
<div class="image-container">
<img src="Person/1.jpg" />
</div>
</div>
<div class="lower-container">
<div>
<h3>Alaina Wick</h3>
<h4>Front-end Developer</h4>
</div>
<div>
<p>
sodales accumsan ligula. Aenean sed diam tristique, fermentum mi nec, ornare arcu.
</p>
</div>
<div>
View profile
</div>
</div>
</div>
<div class="card-container">
<div class="upper-container">
<div class="image-container">
<img src="Person/3.jpg" />
</div>
</div>
<div class="lower-container">
<div>
<h3>Alaina Wick</h3>
<h4>Front-end Developer</h4>
</div>
<div>
<p>
sodales accumsan ligula. Aenean sed diam tristique, fermentum mi nec, ornare arcu.
</p>
</div>
<div>
View profile
</div>
</div>
</div>
</div>
</body>
</html>
Try changing the justify-content for the team. Don't really know about your environment and your preview
Guys I'm facing a problem, What I'm doing is creating an image grid with the overlay effect which is nothing just a container with absolute position and has some caption and text when someone hover on it. The grid can have only 3 images per row. It's all work fine but i want to vertically center the caption and paragraph text according to parent element of the overlay effect. I know i can do this by using flexbox but i want browser compatibility that's why I'm not using flexbox. Is there a way we can do this without using flexbox?
*,
.row,
.col {
box-sizing: border-box;
}
body {
font: 1em/1.5 'Open Sans', sans-serif;
color: #373737;
background: #eaeaea;
}
h1,
h2,
h3 {
text-transform: uppercase;
}
h2 {
font-size: 1.125em;
color: #4a89ca;
font-weight: 600;
margin: 0;
}
h3 {
font-size: 1.3em;
line-height: 1.25em;
margin-top: .85em;
margin-bottom: .5em;
}
p {
font-size: .875em;
line-height: 1.4;
margin: 0 0 1.5em;
}
.container {
max-width: 1260px;
width: 94.02985075%;
background: #fff;
margin: auto;
}
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
.row {
text-align: center;
margin-bottom: 10px;
}
.row:last-child {
margin-bottom: 0;
}
.col {
position: relative;
float: left;
display: block;
}
.col + .col {
margin-left: 1.6%;
}
.col-4 {
width: 32.2666666667%;
line-height: 0;
overflow: hidden;
}
.col-4 img {
max-width: 100%;
display: block;
background-color: #eaeaea;
}
.photo-overlay {
position: absolute;
left: 0;
padding-left: 20px;
padding-right: 20px;
top: 0;
bottom: 0;
right: 0;
color: #fff;
background-color: rgba(0, 0, 0, .5);
}
/* =================================
Photo Overlay Transitions
==================================== */
.photo-overlay {
opacity: 0;
transition: opacity .5s;
}
.photo-overlay:hover {
opacity: 1;
}
<body>
<div class="container"> <!-- Start The Container-->
<div class="row"><!-- Start The Row-->
<div class="col col-4">
<img src="http://i.imgur.com/UbkKBuO.jpg" alt="img_1.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
<div class="col col-4">
<img src="http://i.imgur.com/oXvUpY5.jpg" alt="img_2.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
<div class="col col-4">
<img src="http://i.imgur.com/rmM0h1h.jpg" alt="img_3.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
</div><!-- End The Row-->
<div class="row"><!-- Start The Row-->
<div class="col col-4">
<img src="http://i.imgur.com/51LBdNS.jpg" alt="img_4.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
<div class="col col-4">
<img src="http://i.imgur.com/x9EzUS5.jpg" alt="img_5.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
<div class="col col-4">
<img src="http://i.imgur.com/Y0cIa13.jpg" alt="img_6.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
</div><!-- End The Row-->
<div class="row"><!-- Start The Row-->
<div class="col col-4">
<img src="http://i.imgur.com/x3qHk2k.jpg" alt="img_7.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
<div class="col col-4">
<img src="http://i.imgur.com/1cHC3hQ.jpg" alt="img_8.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
<div class="col col-4">
<img src="http://i.imgur.com/lNNT4Mq.jpg" alt="img_9.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
</div><!-- End The Row-->
<div class="row"><!-- Start The Row-->
<div class="col col-4">
<img src="http://i.imgur.com/145mdOE.jpg" alt="img_10.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
</div> <!-- End The Row-->
</div> <!-- End The Container-->
</body>
Yes, you can use CSS positioning properties. Wrap the content you want centered in its own container, then use position: absolute.
*,
.row,
.col {
box-sizing: border-box;
}
body {
font: 1em/1.5 'Open Sans', sans-serif;
color: #373737;
background: #eaeaea;
}
h1,
h2,
h3 {
text-transform: uppercase;
}
h2 {
font-size: 1.125em;
color: #4a89ca;
font-weight: 600;
margin: 0;
}
h3 {
font-size: 1.3em;
line-height: 1.25em;
margin-top: .85em;
margin-bottom: .5em;
}
p {
font-size: .875em;
line-height: 1.4;
margin: 0 0 1.5em;
}
.container {
max-width: 1260px;
width: 94.02985075%;
background: #fff;
margin: auto;
}
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
.row {
text-align: center;
margin-bottom: 10px;
}
.row:last-child {
margin-bottom: 0;
}
.col {
position: relative;
float: left;
display: block;
}
.col + .col {
margin-left: 1.6%;
}
.col-4 {
width: 32.2666666667%;
line-height: 0;
overflow: hidden;
}
.col-4 img {
max-width: 100%;
display: block;
background-color: #eaeaea;
}
.photo-overlay {
position: absolute;
left: 0;
padding-left: 20px;
padding-right: 20px;
top: 0;
bottom: 0;
right: 0;
color: #fff;
background-color: rgba(0, 0, 0, .5);
}
/* =================================
Photo Overlay Transitions
==================================== */
.photo-overlay {
opacity: 0;
transition: opacity .5s;
}
.photo-overlay:hover {
opacity: 1;
}
/* NEW */
.photo-overlay:hover > div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
<div class="container">
<div class="row">
<div class="col col-4">
<img src="http://i.imgur.com/UbkKBuO.jpg" alt="img_1.jpg">
<div class="photo-overlay">
<div><!-- START NEW CONTAINER -->
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div><!-- END NEW CONTAINER -->
</div>
</div>
</div>
</div>
Here's an explanation of this centering method:
Element will not stay centered, especially when re-sizing screen
Here's another method using vertical-align and table properties:
Vertically center two elements within a div
Put your text that's inside your .photo-overlay into another div, and give that div the following styles:
position: absolute;
top: 50%;
transform: translateY(-50%);
I am beginner with HTML and CSS so I decided to try code .psd layout. Unfortunately, I am stuck with that part of layout:
I mean that lines between circles with images.
Here is my code for that:
html {
font-size: 62.5%;
}
body {
width: 1400px;
font-family: "Roboto Slab", serif;
}
section {
padding-right: 230px;
padding-left: 230px;
}
.culture {
padding-top: 100px;
padding-bottom: 100px;
background-color: #f9f9f9;
overflow: auto;
}
h2 {
font-family: "Montserrat", sans-serif;
font-size: 4rem;
color: #222;
text-align: center;
}
.culture p {
color: #777;
text-align: center;
}
.culture > p {
padding-top: 20px;
padding-bottom: 89px;
font-size: 2rem;
}
.value {
float: left;
padding-right: 56px;
}
.line {
width: 170px;
height: 2px;
background-color: #777;
}
.value_img {
width: 91px;
height: 91px;
margin: 0 auto 25px;
border: 2px #777 solid;
border-radius: 100%;
background-repeat: no-repeat;
background-position: center center;
}
.balance {
background-image: url("http://d-k.aq.pl/note.png");
}
.quality {
background-image: url("http://d-k.aq.pl/chart.png");
}
.excellence {
background-image: url("http://d-k.aq.pl/star.png");
}
h3 {
font-family: "Montserrat", sans-serif;
font-size: 1.8rem;
color: #222;
text-align: center;
}
.value p {
padding-top: 20px;
font-size: 1.4rem;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700" rel="stylesheet" type="text/css">
</head>
<section class="culture">
<h2>
CULTURE & VALUES
</h2>
<p>
Phasellus gravida ex at odio elementum.
</p>
<div class="value">
<div class="value_img balance">
</div>
<h3>
WORK-LIFE BALANCE
</h3>
<p>
Suspendisse ut odio vel felis pulvinar<br>
sodales. Nunc ultricies nibh non velit<br>
feugiat cursus. Phasellus scelerisque
</p>
</div>
<div class="line">
</div>
<div class="value">
<div class="value_img quality">
</div>
<h3>
QUALITY OVER QUANTITY
</h3>
<p>
Suspendisse ut odio vel felis pulvinar<br>
sodales. Nunc ultricies nibh non velit<br>
feugiat cursus. Phasellus scelerisque.
</p>
</div>
<div class="line">
</div>
<div class="value">
<div class="value_img excellence">
</div>
<h3>
DELIVER EXCELLENCE
</h3>
<p>
Suspendisse ut odio vel felis pulvinar<br>
sodales. Nunc ultricies nibh non velit<br>
feugiat cursus. Phasellus scelerisque.
</p>
</div>
</section>
Should I use absolute positioning for them?
Use padding of .wrapper for setting width of all items.
.wrapper {
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 10%;
}
.item {
border: 3px solid #777;
width: 100px;
height: 100px;
border-radius: 50%;
}
.line {
border: 1px solid #777;
margin: 0 2%;
flex: 1 0;
}
<div class="wrapper">
<div class="item"></div>
<div class="line"></div>
<div class="item"></div>
<div class="line"></div>
<div class="item"></div>
</div>
You can use pseudo elements and negative margins :
.value + .value .value_img:before {
content: '';
display: block;
margin: 50px 0 0 -190px;
width: 170px;
height: 2px;
background-color: #777;
}
.line {/* deleted from html */}
you may also take a look at display:flex to set the layout instead float, margin can be used too instead fixed average padding values
html {
font-size: 62.5%;
}
body {
width: 940px;/* padding of section removed */
font-family: "Roboto Slab", serif;
margin: auto;
}
section {
/* ??
padding-right: 230px;
padding-left: 230px;
*/
}
.culture {
padding-top: 100px;
padding-bottom: 100px;
background-color: #f9f9f9;
overflow: auto;
display: flex;/* set things easily and will allow vertical and or horizontal alignements */
flex-wrap: wrap;/* we need this here */
}
h2 {
font-family: "Montserrat", sans-serif;
font-size: 4rem;
color: #222;
text-align: center;
width: 100%;
}
.culture p {
color: #777;
text-align: center;
}
.culture > p {
padding-top: 20px;
padding-bottom: 89px;
font-size: 2rem;
width: 100%;
}
.value {
padding: 0 28px;/* around equally , helps to center things visually */
}
/* draw the lines here, .value + .value .. does not select first */
.value + .value .value_img:before {
content: '';
display: block;
margin: 50px 0 0 -190px;
width: 170px;
height: 2px;
background-color: #777;
}
.line {/* no need no more */}
.value_img {
width: 91px;
height: 91px;
margin: 0 auto 25px;
border: 2px #777 solid;
border-radius: 100%;
background-repeat: no-repeat;
background-position: center center;
}
.balance {
background-image: url("http://d-k.aq.pl/note.png");
}
.quality {
background-image: url("http://d-k.aq.pl/chart.png");
}
.excellence {
background-image: url("http://d-k.aq.pl/star.png");
}
h3 {
font-family: "Montserrat", sans-serif;
font-size: 1.8rem;
color: #222;
text-align: center;
}
.value p {
padding-top: 20px;
font-size: 1.4rem;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700" rel="stylesheet" type="text/css">
</head>
<section class="culture">
<h2>
CULTURE & VALUES
</h2>
<p>
Phasellus gravida ex at odio elementum.
</p>
<div class="value">
<div class="value_img balance">
</div>
<h3>
WORK-LIFE BALANCE
</h3>
<p>
Suspendisse ut odio vel felis pulvinar
<br>sodales. Nunc ultricies nibh non velit
<br>feugiat cursus. Phasellus scelerisque
</p>
</div>
<div class="value">
<div class="value_img quality">
</div>
<h3>
QUALITY OVER QUANTITY
</h3>
<p>
Suspendisse ut odio vel felis pulvinar
<br>sodales. Nunc ultricies nibh non velit
<br>feugiat cursus. Phasellus scelerisque.
</p>
</div>
<div class="value">
<div class="value_img excellence">
</div>
<h3>
DELIVER EXCELLENCE
</h3>
<p>
Suspendisse ut odio vel felis pulvinar
<br>sodales. Nunc ultricies nibh non velit
<br>feugiat cursus. Phasellus scelerisque.
</p>
</div>
</section>
I have made a simple landing page so that I can work with responsive design. I am using Bootstrap.
I have a grid of 4 items. Each item has an image, a header, a description and a link. On all devices, the grid's rows should contain two columns, apart from extra small, in which case it should contain one column.
This all seems to work fine, having tested on an all 4 Bootstrap sizes. However, when I plug it into Codepen, one of the columns starts in the middle of the row and forces the next column to spill over to the next row. This only happens on small screens (768px to 991px).
I have tried to change certain styling, such as reducing the container width and text size, but nothing produces the desired effect whilst maintaining the design.
Here is a picture of what is happening:
The 'Nullam' div should be on the left of the same row.
Here is a link to the Codepen: http://codepen.io/alanbuchanan/pen/PZXRPr
Here is my HTML:
<div class="bg-brown">
<div class="container">
<div class="row top-section">
<img class="lorem-image" src="http://i.imgur.com/7Eiswkk.png" alt="">
<h1>Ipsum Dolor sit Amet.</h1>
<p class="col-lg-offset-2 col-lg-8">Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<div class="col-lg-12">
<button>Donec quam felis!</button>
</div>
</div>
</div>
</div>
<div class="bg-white">
<div class="container">
<div class="row content-section-1">
<div class="col-sm-6 col-xs-12">
<img class="img-responsive" src="http://lorempixel.com/400/250/cats/1" alt="">
<h2 class="thing-header">Ultricies nec.</h2>
<p class="thing-description">Pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p class="thing-link"><span>Donec pede justo!</span></p>
</div>
<div class="col-sm-6 col-xs-12">
<img class="img-responsive" src="http://lorempixel.com/400/250/cats/2" alt="">
<h2 class="thing-header">Fringilla vel.</h2>
<p class="thing-description">Aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut.</p>
<p class="thing-link"><span>Imperdiet a, venenatis vitae, justo!</span></p>
</div>
<div class="col-sm-6 col-xs-12">
<img class="img-responsive" src="http://lorempixel.com/400/250/cats/3" alt="">
<h2 class="thing-header">Nullam.</h2>
<p class="thing-description">Dictum felis eu pede mollis pretium. Integer tincidunt. </p>
<p class="thing-link"><span>Cras dapibus!</span></p>
</div>
<div class="col-sm-6 col-xs-12">
<img class="img-responsive" src="http://lorempixel.com/400/250/cats/4" alt="">
<h2 class="thing-header">Vivamus elementum semper nisi.</h2>
<p class="thing-description">Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu.</p>
<p class="thing-link"><span>Consequat vitae!</span></p>
</div>
</div>
<div class="row prefooter">
<p>Eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
</div>
</div>
</div>
<div class="bg-bottom">
<div class="container">
<div class="row content-section-2">
<h1><i class="fa fa-github"></i> alanbuchanan</h1>
</div>
</div>
</div>
Here is my CSS:
#import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400);
$font-thin: 'Source Sans Pro', sans-serif;
$top-section-bg-color: #48240A;
$btn-bg-color: #a5682a;
$btn-border-width: 2px;
$main-color: #EEEEEE;
$top-section-spacing: 80px;
$content-section-1-bg-color: #EEEEEE;
$content-section-1-font-color: black;
$content-section-2-bg-color: $top-section-bg-color;
body {
font-family: $font-thin;
color: $main-color;
font-weight: 200;
text-rendering: optimizeLegibility;
font-size: 14px;
}
a, a:active, a:hover, a:focus {
text-decoration: none;
border-bottom: 1px dashed $main-color;
color: $main-color;
}
.bg-brown {
background-color: $top-section-bg-color;
}
.bg-white {
background-color: $content-section-1-bg-color;
}
.top-section {
img {
display: block;
margin: 0 auto;
margin-top: $top-section-spacing;
}
h1 {
text-align: center;
color: $main-color;
margin-top: $top-section-spacing;
}
p {
text-align: center;
margin-top: $top-section-spacing;
}
button {
font-family: $font-thin;
display: block;
background-color: $btn-bg-color;
color: $main-color;
font-size: 20px;
font-weight: 200;
text-decoration: none;
cursor: pointer;
padding: 9px 20px;
margin: $top-section-spacing auto $top-section-spacing auto;
border-radius:6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-style: none;
border: $btn-border-width solid $btn-bg-color;
transition: background-color 0.2s ease;
&:focus {
outline: none;
}
}
}
.content-section-1 {
background-color: $content-section-1-bg-color;
color: $content-section-1-font-color;
margin-top: 100px;
img {
display: block;
margin: 0 auto;
width: 100%;
}
.thing-header {
margin: 40px 0;
text-align: center;
font-weight: 200;
}
.thing-description {
text-align: center;
margin: 0;
padding: 0;
font-size: 14px;
}
.thing-link {
display: block;
text-align: center;
font-weight: 400;
margin-bottom: 40px;
span {
text-decoration: none;
border-bottom: 1px dashed black;
}
}
}
.prefooter {
color: $content-section-1-font-color;
padding: 50px;
text-align: center;
}
.bg-bottom {
background-color: $content-section-2-bg-color;
}
.content-section-2 {
h1 {
text-align: center;
font-weight: 200;
padding: 50px;
}
}
html.no-touch button:hover {
background-color: $top-section-bg-color;
border: $btn-border-width solid $btn-bg-color;
}
#media screen and (min-width: 320px) and (max-width: 480px) {
.lorem-image {
width: 220px;
}
.thing-header, .thing-description, .thing-link {
text-align: left !important;
}
}
the problem is with the height of the above elements!
as you can see in the picture the above element pushed the element blow it because of it's hieght!
for example try to put margin: 0px; for the p element at the bottom and the picture will come back to it's place
but that's not the right solution! the right solution is to put each 2 elements for example in one div and then close it and put the other two in another div and close and so on so the each element can be placed without hurting the below ones, so your HTML will look something like this
<div class="row">
<div class="col-sm-6 col-xs-12"></div>
<div class="col-sm-6 col-xs-12"></div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12"></div>
<div class="col-sm-6 col-xs-12"></div>
</div>
other than that you're doing good man, good luck with your website.
You simply need to clear the float of every 2nd column above 768px since you're using col-sm-6 and no other grid breakpoint. This resolves the difference in height of your columns without the need for adding rows around every 12 columns used.
Note: I added a class of item to each column, you can use whatever makes sense as this is generic.
#media (min-width: 768px) {
.item:nth-child(2n+1) {
clear: left;
}
}
See working example Snippet at FullPage and reduce the viewport.
#import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400);
body {
font-family: "Source Sans Pro", sans-serif;
color: #EEEEEE;
font-weight: 200;
text-rendering: optimizeLegibility;
}
a,
a:active,
a:hover,
a:focus {
text-decoration: none;
border-bottom: 1px dashed #EEEEEE;
color: #EEEEEE;
}
.bg-brown {
background-color: #48240A;
}
.bg-white {
background-color: #EEEEEE;
}
.top-section img {
display: block;
margin: 0 auto;
margin-top: 80px;
}
.top-section h1 {
text-align: center;
color: #EEEEEE;
margin-top: 80px;
}
.top-section p {
text-align: center;
margin-top: 80px;
}
.top-section button {
font-family: "Source Sans Pro", sans-serif;
display: block;
background-color: #a5682a;
color: #EEEEEE;
font-size: 20px;
font-weight: 200;
text-decoration: none;
cursor: pointer;
padding: 9px 20px;
margin: 80px auto 80px auto;
border-radius: 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-style: none;
border: 2px solid #a5682a;
transition: background-color 0.2s ease;
}
.top-section button:focus {
outline: none;
}
.content-section-1 {
background-color: #EEEEEE;
color: black;
margin-top: 50px;
}
.content-section-1 img {
margin: 0 auto;
}
.content-section-1 .thing-header {
margin: 40px 0;
text-align: center;
font-weight: 200;
}
.content-section-1 .thing-description {
text-align: center;
margin: 0;
padding: 0;
}
.content-section-1 .thing-link {
display: block;
text-align: center;
font-weight: 400;
margin-bottom: 40px;
}
.content-section-1 .thing-link span {
text-decoration: none;
border-bottom: 1px dashed black;
}
.prefooter {
color: black;
padding: 20px;
margin-bottom: 20px;
text-align: center;
}
.bg-bottom {
background-color: #48240A;
}
.content-section-2 h1 {
text-align: center;
font-weight: 200;
padding: 50px;
}
html.no-touch button:hover {
background-color: #48240A;
border: 2px solid #a5682a;
}
.img-row {
margin: 0 2%;
}
#media screen and (min-width: 320px) and (max-width: 480px) {
.lorem-image {
width: 220px;
}
.thing-header,
.thing-description,
.thing-link {
text-align: left !important;
}
}
#media (min-width: 768px) {
.item:nth-child(2n+1) {
clear: left;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="bg-brown">
<div class="container">
<div class="row top-section">
<img class="lorem-image" src="http://i.imgur.com/7Eiswkk.png" alt="">
<h1>Ipsum Dolor sit Amet.</h1>
<p class="col-lg-offset-2 col-lg-8">Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<div class="col-lg-12">
<button>Donec quam felis!</button>
</div>
</div>
</div>
</div>
<div class="bg-white">
<div class="container">
<div class="row content-section-1">
<div class="col-sm-6 item">
<img class="img-responsive" src="http://lorempixel.com/400/250/cats/1" alt="">
<h2 class="thing-header">Ultricies nec.</h2>
<p class="thing-description">Pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p class="thing-link"><span>Donec pede justo!</span>
</p>
</div>
<div class="col-sm-6 item">
<img class="img-responsive" src="http://lorempixel.com/400/250/cats/2" alt="">
<h2 class="thing-header">Fringilla vel.</h2>
<p class="thing-description">Aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut.</p>
<p class="thing-link"><span>Imperdiet a, venenatis vitae, justo!</span>
</p>
</div>
<div class="col-sm-6 item">
<img class="img-responsive" src="http://lorempixel.com/400/250/cats/3" alt="">
<h2 class="thing-header">Nullam.</h2>
<p class="thing-description">Dictum felis eu pede mollis pretium. Integer tincidunt.</p>
<p class="thing-link"><span>Cras dapibus!</span>
</p>
</div>
<div class="col-sm-6 item">
<img class="img-responsive" src="http://lorempixel.com/400/250/cats/4" alt="">
<h2 class="thing-header">Vivamus elementum semper nisi.</h2>
<p class="thing-description">Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu.</p>
<p class="thing-link"><span>Consequat vitae!</span>
</p>
</div>
<div class="col-sm-6 item">
<img class="img-responsive" src="http://lorempixel.com/400/250/cats/2" alt="">
<h2 class="thing-header">Fringilla vel.</h2>
<p class="thing-description">Aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut.</p>
<p class="thing-link"><span>Imperdiet a, venenatis vitae, justo! Imperdiet a, venenatis vitae, justo!</span>
</p>
</div>
<div class="col-sm-6 item">
<img class="img-responsive" src="http://lorempixel.com/400/250/cats/1" alt="">
<h2 class="thing-header">Ultricies nec.</h2>
<p class="thing-description">Pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Nulla consequat massa quis enim. Nulla consequat massa quis enim.</p>
<p class="thing-link"><span>Donec pede justo! Imperdiet a, venenatis vitae, justo!</span>
</p>
</div>
</div>
<div class="row prefooter">
<p>Eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
</div>
</div>
</div>
<div class="bg-bottom">
<div class="container">
<div class="row content-section-2">
<h1><i class="fa fa-github"></i> alanbuchanan</h1>
</div>
</div>
</div>
As has been pointed out, the issue is related to the variable height of your content boxes due to image size and/or line length of the text.
The trick is to have all boxes match the height of the tallest content box and for that I use a small piece of JavaScript.
<div class="row">
<div class="col-xs-12 col-sm-6 jsEqualHeight"></div>
<div class="col-xs-12 col-sm-6 jsEqualHeight"></div>
</div>
Using the .jsEqualHeight class
if (jQuery) {
(function ($) {
"use strict";
$(document).ready(function () {
$(window).on('resize', function () {
equalHeights();
});
equalHeights();
function equalHeights() {
if (window.matchMedia("(min-width: 768px)").matches) {
var elementHeights = $('.jsEqualHeight').map(function () {
return $(this).height();
}).get();
// Math.max takes a variable number of arguments
// 'apply' is equivalent to passing each height as an argument
var maxHeight = Math.max.apply(null, elementHeights);
// Set each height to the max height
$('.jsEqualHeight').height(maxHeight);
} else {
$('.jsEqualHeight').css({ "height": "auto" });
}
}
});
}(jQuery));
}
You might need to play with the value of the media query in the matchMedia function to suit your solution and depending on your supported browser matrix, a polyfill JS for older browsers that do not support matchMedia.
It's because of the long text you have inside. I suggest you add these for the .thing-description
white-space:nowrap;
overflow:hidden;
text-overflow:clip;
UPDATED PEN