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%);
Related
I would like to center correctly my title Learn About Us like for the title What we do, because there is a lag with the picture, I think?
I don't understand how to center like this example:
Here, the titles are aligned correctly.
I thank you in advance for your help and your time.
h2 {
font-size: 2.5rem;
color: rgb(28, 19, 37);
margin: 0;
}
p {
color: rgb(134, 134, 134);
margin: 1rem 0;
line-height: 1.5;
}
button {
outline: none;
border: none;
border-radius: 0.25rem;
background: rgb(28, 19, 37);
color: #F7CAC9;
font-size: 1rem;
letter-spacing: 0.5px;
text-decoration: none;
padding: 1rem 1.5rem;
}
.container {
display: flex;
font-family: sans-serif;
max-width: 1000px;
margin: 2rem auto;
}
.container img {
height: 350px;
margin: 1rem;
}
.section-header p {
position: relative;
}
.section-header p::after,
.section-header p::before {
position: absolute;
content: "";
height: 2px;
width: 35px;
background: #F7CAC9;
z-index: -1;
}
.section-header p::after {
top: 11px;
margin: 0 10px;
}
.section-header p::before {
top: 11px;
margin-left: -45px;
}
.service .section-header {
width: 100%;
text-align: center;
}
<div class="about">
<div class="container">
<img src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
<div class="content">
<div class="section-header">
<p>Learn About Us</p>
<h2>Welcome to Yooga</h2>
</div>
<div class="about-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis
ornare
velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis
ornare
velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem. Curabitur non
nisl
nec nisi scelerisque maximus.
</p>
<button>Learn More</button>
</div>
</div>
</div>
</div>
<!-- About End -->
<br />
<!-- Service Start -->
<div class="service">
<div class="container">
<div class="section-header">
<p>What we do</p>
<h2>Yoga For Health</h2>
</div>
</div>
</div>
Since you have added -45px margin-left for .section-header p::before, you need to add +45px margin-left to .content .section-header p, to cancel out the effect.
h2 {
font-size: 2.5rem;
color: rgb(28, 19, 37);
margin: 0;
}
p {
color: rgb(134, 134, 134);
margin: 1rem 0;
line-height: 1.5;
}
button {
outline: none;
border: none;
border-radius: 0.25rem;
background: rgb(28, 19, 37);
color: #F7CAC9;
font-size: 1rem;
letter-spacing: 0.5px;
text-decoration: none;
padding: 1rem 1.5rem;
}
.container {
display: flex;
font-family: sans-serif;
max-width: 1000px;
margin: 2rem auto;
}
.container img {
height: 350px;
margin: 1rem;
}
.section-header p {
position: relative;
}
.content .section-header p{
margin-left: 45px;
}
.section-header p::after,
.section-header p::before {
position: absolute;
content: "";
height: 2px;
width: 35px;
background: #F7CAC9;
z-index: -1;
}
.section-header p::after {
top: 11px;
margin: 0 10px;
}
.section-header p::before {
top: 11px;
margin-left: -45px;
}
.service .section-header {
width: 100%;
text-align: center;
}
<div class="about">
<div class="container">
<img src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
<div class="content">
<div class="section-header">
<p>Learn About Us</p>
<h2>Welcome to Yoga</h2>
</div>
<div class="about-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem. Curabitur non nisl nec nisi scelerisque maximus.
</p>
<button>Learn More</button>
</div>
</div>
</div>
</div>
<!-- About End -->
<br />
<!-- Service Start -->
<div class="service">
<div class="container">
<div class="section-header">
<p>What we do</p>
<h2>Yoga For Health</h2>
</div>
</div>
</div>
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>
I am trying to make the following banner in bootstrap. The demo of the banner can be seen her.
I cannot figure out how I can make this in bootstrap 3, and where to start. Should the row and col be like this for at start, or should it only be one row? Is it transform there is making the slant line on the image?
<div class="container-fluid">
<div class="row">
<div class="col-md-6">Text here</div>
<div class="col-md-6"><img src="https://image-here.jpg"></div>
</div>
</div>
The original code for the banner is:
.widget-about {
position: relative;
overflow: hidden;
padding: 0;
margin: 0;
}
.widget-about .tg-container {
position: absolute;
left: 50%;
top: 0;
height: 100%;
max-width: 1200px;
transform: translateX(-50%);
}
.widget-about .tg-container .about-content-wrapper {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
background: #f9f9f9; }
.widget-about .tg-container .about-content-wrapper .about-block {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 999; }
.widget-about .tg-container .about-content-wrapper .about-block .about-title {
font-size: 28px;
margin: 0;
text-transform: uppercase; }
.widget-about .tg-container .about-content-wrapper .about-block .about-title a {
color: #454545; }
.widget-about .tg-container .about-content-wrapper .about-block .about-sub-title {
color: #00a9e0;
margin: 10px 0;
font-size: 16px;
text-transform: capitalize; }
.widget-about .tg-container .about-content-wrapper .about-block .about-content {
color: #737373;
font-size: 14px;
margin-top: 20px; }
.widget-about .tg-container .about-content-wrapper:before {
content: "";
position: absolute;
width: 1000%;
height: 100%;
background: #f9f9f9;
left: -1000%;
top: 0; }
.widget-about .tg-container .about-content-wrapper:after {
background: #f9f9f9 none repeat scroll 0 0;
content: "";
height: 2000px;
position: absolute;
right: 650px;
top: 50%;
transform: rotate(70deg) translateY(-50%);
width: 2000px;
z-index: 9; }
.about-img {
/* margin: 0; */
}
.about-img img {
width: 100%;
display: block; }
<section id="estore_about-3" class="widget widget-about clearfix">
<div class="section-wrapper">
<figure class="about-img">
<img width="1600" height="310" src="https://demo.themegrill.com/estore/wp-content/uploads/sites/49/2016/02/about.jpg">
</figure>
<div class="tg-container">
<div class="about-content-wrapper">
<div class="about-block">
<h3 class="about-title">
BEST STORE THEME </h3>
<h4 class="about-sub-title">Multicolor & Multipurpose Woocommerce Theme</h4>
<div class="about-content">
Aenean ipsum felis, luctus in hendrerit eget, varius non lacus. Duis et aliquet lacus. Quisque iaculis congue facilisis. Aenean eu dolor vestibulum, lobortis ligula eu, rhoncus diam. Etiam et efficitur augue. Etiam vehicula sem quis risus elementum euismod. Sed id mattis sapien. Ut lacinia aliquam massa eget efficitur. Suspendisse fermentum eget leo suscipit faucibus. Morbi
</div>
</div>
</div><!-- .about-content-wrapper -->
</div><!-- .tg-container -->
</div>
</section>
Edit
You won't be able to exactly match without some custom css, so here's the my minimum using mostly bootstrap classes and some custom css to get the desired styles (little slant) and expected responsive behavior.
.custom-bg {
background-size: cover;
background-position: center right;
min-height: 100px !important;
}
.custom-content:after {
background: transparent;
border-top: 250px solid transparent;
border-bottom: 0px solid transparent;
border-left: 80px solid #f7f7f7;
content: '';
height: 100%;
position: absolute;
right: -80px;
top: 0;
width: 0;
z-index: 10;
}
.custom-row {
margin: 0 !important;
}
#media (max-width: 991px) {
.custom-bg {
background-position: top right;
}
.custom-row {
flex-direction: column-reverse;
}
.custom-content:after {
display: none
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row custom-row">
<div class="col-lg-7 col-sm-12">
<div class="p-3 custom-content">
<h3>Best Store Theme</h3>
<h5 class="text-primary">Multicolor & Multipurpose Woocommerce Theme</h5>
<p>Aenean ipsum felis, luctus in hendrerit eget, varius non lacus. Duis et aliquet lacus. Quisque iaculis congue facilisis. Aenean eu dolor vestibulum, lobortis ligula eu, rhoncus diam. Etiam et efficitur augue. Etiam vehicula sem quis risus elementum euismod. Sed id mattis sapien. Ut lacinia aliquam massa eget efficitur. Suspendisse fermentum eget leo suscipit faucibus. Morbi</p>
</div>
</div>
<div class="col-lg-5 col-sm-12 custom-bg" style="background-image: url('https://demo.themegrill.com/estore/wp-content/uploads/sites/49/2016/02/about.jpg')">
</div>
</div>
I'm trying to make an overlapping effect when the user scrolls using the sticky position and giving each div (section) a new background colour. However, even after setting top to 0 for the sticky position, the divs scroll out of the viewport. Any help would be great!
$(document).ready(function(){
$('#about').click(function(){
$('#aboutcontainer').slideToggle('slow');
});
});
html, body {
margin: 0 auto;
font-size: 22px;
width: 100%;
height: 100%;
}
h3 {
margin: 0;
}
ul, li {
margin: 0 auto;
}
span {
font-weight: 400;
}
.container {
height:102vh;
}
.contentcontainer {
display: flex;
justify-content: center;
align-items: center;
height: auto;
}
.vertical-center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#navbar {
width: 100%;
position: sticky;
top: 0px;
background-color: #ffffff;
font-family: Abel;
height: 100px;
}
#desktop-nav-wrapper {
padding: 0 45px;
height: inherit;
position: relative;
}
#logo {
font-size: 200%;
width: auto;
float: left;
letter-spacing: 3px;
}
#desktop-nav-wrapper ul {
margin-top: 6.5vh;
float: right;
}
#desktop-nav-wrapper li {
position: relative;
display: inline-block;
padding-left: 25px;
font-weight: 300;
color: #000000;
font-family: Abel;
}
#desktop-nav-wrapper li:nth-child(even):hover {
cursor: default;
}
#desktop-nav-wrapper li:nth-child(odd):hover {
cursor: pointer;
}
#aboutcontainer {
display: none;
background-color: #ffffff;
}
#aboutcontainer p {
margin-bottom: 0;
padding-left: 45px;
text-align: left;
width: 80%;
font-family: Lato;
font-weight: 300;
font-size: 92%;
}
#one {
background-color: #ffd700;
position: sticky;
top: 0;
}
#two {
background-color: #468499;
position: sticky;
top: 0;
}
#three {
background-color: #468499;
position: sticky;
top: 0;
}
#media only screen and (max-width: 768px) {
#logo {
margin-top: -1vh;
}
#desktop-nav-wrapper {
padding: 0 15px;
height: inherit;
}
#desktop-nav-wrapper ul {
float: left;
padding-left: 0;
width: 100%;
margin-top: 11vh;
}
#desktop-nav-wrapper li {
position: relative;
display: inline-block;
padding-left: 0;
margin-right: 2%;
font-weight: 300;
color: #000000;
font-family: Abel;
}
#aboutcontainer p {
margin-bottom: 0;
padding-left: 15px;
text-align: left;
width: 90%;
font-family: Lato;
font-weight: 300;
font-size: 80%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navbar">
<div id="desktop-nav-wrapper">
<h3 id="logo" class="vertical-center">Test Header</h3>
<ul>
<li id="about" class="desktop-items">about</li>
</ul>
</div>
</div>
<div id="aboutcontainer" style="display: none;">
<p>
Phasellus vitae semper risus. Quisque in finibus nisi. Sed non rhoncus purus, eu luctus orci. Vestibulum massa nisi, bibendum eget libero ut, tempor mattis metus. Maecenas placerat nisl non mauris fringilla ultricies. Phasellus dignissim velit vitae tellus sodales luctus. Nullam tempus turpis vitae nunc lacinia faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget volutpat nunc. Cras et libero et ligula suscipit finibus et id dui. Duis odio enim, interdum vitae ullamcorper ut, sagittis vitae metus. Phasellus feugiat libero metus, sed tempor erat porttitor ut. Integer vel libero eu ante sollicitudin fermentum non quis nisl. Aliquam blandit dignissim sem, et malesuada risus venenatis eget. Nulla pretium ornare dui fermentum cursus.
</p>
</div>
<div class="container" id="one">
<div class="contentcontainer">
<h3>One</h3>
</div>
</div>
<div class="container" id="two">
<div class="contentcontainer">
<h3>Two</h3>
</div>
</div>
<div class="container" id="three">
<div class="contentcontainer">
<h3>Three</h3>
</div>
</div>
Figured it out... Turns out position: sticky isn't a fan of HTML and body having their height set to 100%. I removed it and it now works fine.
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