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
Related
.dropbtn {
border: none;
padding: 4px;
}
.dropbtn img {
margin-top: 15px;
}
.dropdown {
position: relative;
display: inline-block;
width: 75px;
text-align: center;
height: 55px;
}
.dropdown:hover {
position: relative;
display: inline-block;
width: 75px;
text-align: center;
height: 55px;
border-radius: 1px;
border: 2px solid #202020;
}
.dropdown img {
height: 25px;
width: 25px;
}
a {
text-decoration: none;
}
.dropdown-content {
width: 75px;
text-align: center;
display: none;
position: absolute;
background-color: #141414;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
padding-top: 4px;
padding-bottom: 4px;
top: 50px;
}
.dropdown-content a {
padding: 11px 4px;
text-decoration: none;
display: block;
border-radius: 40px;
width: 50px;
height: 50px;
margin: auto;
border: 1px solid #191919;
}
.dropdown-content a:hover {
background-color: #141414;
border: 1px solid #848484;
}
.dropdown:hover .dropbtn,
.active {
background-color: #191919;
opacity: 25%;
}
<header>
<div class="container">
<div class="header-container">
<div class="logo">
<img src="logo.svg" alt="" style="width: 209px;">
</div>
<div class="language dropdown">
<img src="elements/can.png" alt="">
<div class="dropdown-content" style="display: none;">
<img src="elements/aus.png" alt="new zealand flag">
<img src="elements/can.png" alt="canada flag">
<img src="elements/sou.png" alt="quebec flag">
<img src="elements/ger.png" alt="germany flag">
</div>
</div>
</div>
</div>
</header>
<div class="main">
<div class="container">
<div class="main-content">
<div class="star">
<img src="img-bg.svg" alt="">
<div class="content">
<h1 class="logo-middle"><img src="logo.svg" alt=""></h1>
<h1 class="title"><span>H1</span> Title</h1>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus
a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor </p>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>All rights reserved</p>
</footer>
<div class="overlay"></div>
<script>
let dcontent = document.querySelector(".dropdown-content")
document.querySelector(".dropdown").addEventListener("click", showLan)
function showLan() {
if (dcontent.style.display == "none") {
dcontent.style.display = "block"
document.querySelector(".overlay").style.display = "block"
}
document.querySelector(".overlay").addEventListener("click", function() {
dcontent.style.display = "none"
document.querySelector(".overlay").style.display = "none"
})
}
</script>
I can't manage to change my language menu background color when active, language menu should have a thin border when hover, and when active top language icon should have a lighter grey background, like in picture 3, I tried almost everything and can't make it work, instead of grey background there is this thin border like on hover.
You need to wrap your .dropdown and .dropdown-content on a div container and implement some css stying rules.
Here try to check my demo
.dropdown-container {
position: relative;
z-index: 2;
width: max-content;
}
.dropbtn {
border: none;
padding: 4px;
}
.dropbtn img {
margin-top: 15px;
}
.dropdown {
position: relative;
display: inline-block;
width: 75px;
text-align: center;
height: 55px;
}
.dropdown:hover {
position: relative;
display: inline-block;
width: 75px;
text-align: center;
height: 55px;
border-radius: 1px;
}
.dropdown img {
height: 25px;
width: 25px;
}
a {
text-decoration: none;
}
.dropdown-content {
width: 75px;
text-align: center;
display: none;
position: absolute;
background-color: #141414;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding-top: 4px;
padding-bottom: 4px;
}
.dropdown-content a {
padding: 11px 4px;
text-decoration: none;
display: block;
border-radius: 40px;
width: 50px;
height: 50px;
margin: auto;
border: 1px solid #191919;
}
.dropdown-content a:hover {
background-color: #141414;
border: 1px solid #848484;
}
.dropdown:hover,
.active {
background-color: #191919;
opacity: 25%;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1;
}
.display {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>head</title>
</head>
<body>
<header>
<div class="container">
<div class="header-container">
<div class="logo">
<img src="logo.svg" alt="" style="width: 209px;" />
</div>
<div class="dropdown-container">
<div class="language dropdown">
<img src="Sphere.png" alt="" />
</div>
<div class="dropdown-content">
<img src="Sphere.png" />
<img src="Sphere.png" />
<img src="Sphere.png" />
<img src="Sphere.png" />
</div>
</div>
</div>
</div>
</header>
<div class="main">
<div class="container">
<div class="main-content">
<div class="star">
<img src="img-bg.svg" alt="" />
<div class="content">
<h1 class="logo-middle"><img src="logo.svg" alt="" /></h1>
<h1 class="title"><span>H1</span> Title</h1>
<p>
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh
vel velit auctor aliquet. Aenean sollicitudin, lorem quis
bibendum auctor, nisi elit consequat ipsum, nec sagittis sem
nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit
amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio
tincidunt auctor
</p>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>All rights reserved</p>
</footer>
<div class="overlay"></div>
<script>
const dcontent = document.querySelector(".dropdown-content");
const overlay = document.querySelector(".overlay");
document.querySelector(".dropdown").addEventListener("click", () => {
dcontent.classList.toggle("display");
overlay.classList.toggle("display");
});
overlay.addEventListener(
"click",
(e) => {
e.stopPropagation();
dcontent.classList.toggle("display");
overlay.classList.toggle("display");
},
false
);
</script>
</body>
</html>
You may also go to codesandbox https://codesandbox.io/s/amazing-thunder-k38kd?file=/index.html
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 get images to keep the same ratio when they are placed in a div, next to text.
This is what it currently looks like. As you can see the images are stretched to how high the div is that contains the text next to it.
This is the HTML:
<body>
<div id="content" class="content">
<div id="title" class="title">
Sports
</div>
<nav class="nav_bar">
<ul>
<li>Home</li>
<li class="active">Sport</li>
<li>Academics</li>
<li>Other</li>
<li>Stats</li>
</ul>
</nav>
<div id="page_description" class="page_description">
One of my main objectives for the first term of university was to get back my fitness. I decided to do this through going to the gym and playing futsal.
</div>
<div id="gym" class="main_container">
<!-- Title, Hours, Description -->
<div class="other_div">
<div class="activity_title_hours">
<div class="activity_title">
The Gym
</div>
<div class="activity_hours">
- 5 Hours
</div>
</div>
<hr class="hr_title_divider">
<div class="activity_description">
<p>
Lorem ipsum dolor sit amet, consectetur ultrices mauris ante consequat fusce adipiscing, tempor orci aliquam, eros rutrum gravida nec, quo augue lectus integer consequat. Vitae quis fringilla erat nunc ligula habitant. Tortor risus aliquam sodales
</p>
</div>
</div>
<!-- Pic -->
<div id="pic_container" class="pic_container">
<img src="./images/gym.jpeg" class="pic" alt="The Gym logo"/>
</div>
</div>
<hr class="hr_divider">
<div id="5-aside" class="main_container">
<!-- Title, Hours, Description -->
<div class="other_div">
<div class="activity_title_hours">
<div class="activity_title">
5 Aside Footy
</div>
<div class="activity_hours">
- 5 Hours
</div>
</div>
<hr class="hr_title_divider">
<div class="activity_description">
<p>
Lorem ipsum dolor sit amet, consectetur ultrices mauris ante consequat fusce adipiscing, tempor orci aliquam, eros rutrum gravida nec, quo augue lectus integer consequat. Vitae quis fringilla erat nunc ligula habitant. Tortor risus aliquam sodales
</p>
</div>
</div>
<!-- Pic -->
<div id="pic_container" class="pic_container">
<img src="./images/5-aside.jpeg" class="pic" alt="5 Aside"/>
</div>
</div>
<hr class="hr_divider">
</div>
</body>
And here is the CSS:
.page_description {
background-color:rgba(555,555,555,0.5);
width: 40%;
margin-left: auto;
margin-right: auto;
font-size: large;
border-radius: 8px;
margin-bottom: 2%;
}
.main_container {
width: 40%;
margin-left: auto;
margin-right: auto;
/* overflow: hidden; */
background-color:rgba(555,555,555,0.5);
border-radius: 8px;
display: flex;
/* margin-bottom: 5%; */
}
.other_div {
float: left;
min-width: 60%;
max-width: 60%;
padding-left: 2%;
padding-right: 2%;
padding-top: 2%;
padding-bottom: 2%;
}
.activity_title_hours{
display: flex;
}
.activity_title {
float: left;
font-size: 35px;
text-decoration: underline;
height: 100%;
/* width: 50%; */
line-height: 40px;
}
.activity_hours {
float: left;
font-size: 25px;
min-height: 100%;
line-height: 40px;
text-align: left;
}
.pic {
float: right;
/* min-width: 35%; */
box-sizing: border-box;
margin-top: 1%;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 5%;
padding-top: 5%;
border-radius: 8px;
margin-left: auto;
margin-right: auto;
height: 100%;
width: 100%;
}
.activity_description p {
font-size: 20px;
}
hr {
border-width: 2px;
}
.hr_tag {
width:40%;
margin-left: auto;
margin-right: auto;
}
.hr_divider {
width: 40%;
margin-left: auto;
margin-right: auto;
height: 3px;
color: white;
background-color: white;
border: none
}
.hr_title_divider {
width: 100%;
margin-left: auto;
margin-right: auto;
height: 3px;
color: white;
background-color: white;
border: none
}
.title {
text-align: center;
text-decoration: underline;
font-size: 45px;
padding-bottom: 1%;
padding-top: 1%;
color: white;
}
.content {
height: 100%;
width: 100%;
text-align: center;
display: inline-block;
}
How can I stop the images from stretching like they currently do?
Thanks
In your rule for .pic, change height: 100%; to height: auto;
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