I have a problem with position when I scroll one row to the right. Code: https://codepen.io/olastanislawska/pen/GRqooyG (mobile view). Scroll first row to the right and highlight movies class in the first row, then the second row. In the first something is missing, I dont know how to fix that.
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: #rich_clark
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* change colours to suit your needs */
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
/* change colours to suit your needs */
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input,
select {
vertical-align: middle;
}
#app {
height: 100%;
position: relative;
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
}
#app::after {
content: '';
top: 0%;
right: 0%;
bottom: 0%;
left: 0%;
z-index: -1000;
background-image: url(../../markus-spiske-QmEF-d1HQVI-unsplash.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: fixed;
-webkit-filter: blur(10px);
filter: blur(10px);
}
#movies .categories {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 15;
}
#movies .categories .category {
position: relative;
margin: 15px;
}
#movies .categories .category .movies {
overflow-x: auto;
white-space: nowrap;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#movies .categories .category .movies .movie {
min-width: 90%;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin: 5%;
position: relative;
text-align: center;
overflow-y: hidden;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
#media (min-width: 350px) {
#movies .categories .category .movies .movie {
min-width: calc(50%);
}
}
#movies .categories .category .movies .movie.active {
color: #fff;
}
#movies .categories .category .movies .movie.active .image::after {
content: '';
top: 0%;
right: 0%;
bottom: 0%;
left: 0%;
background-color: rgba(54, 54, 54, 0.75);
position: absolute;
border: 2px solid deeppink;
}
#movies .categories .category .movies .movie.active .title {
position: absolute;
top: 5%;
width: 100%;
}
#movies .categories .category .movies .movie.active .content {
position: absolute;
bottom: 5%;
width: 100%;
}
#movies .categories .category .movies .movie.active .content button {
background-color: deeppink;
border: none;
border-radius: 4px;
margin: 10px 0;
padding: 5px 10px;
text-transform: uppercase;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
cursor: pointer;
}
#movies .categories .category .movies .movie .image {
width: 100%;
height: 200px;
background: red;
}
#movies .categories .category .movies .movie .title {
position: absolute;
top: -100%;
width: 100%;
}
#movies .categories .category .movies .movie .content {
position: absolute;
bottom: -100%;
width: 100%;
}
.slider-btns {
position: absolute;
right: 15px;
}
.slider-btns i {
font-size: 22px;
cursor: pointer;
}
#navigation {
padding: 15px 0;
margin: 0 10px;
overflow-x: scroll;
}
#navigation ul.nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 16px;
}
#navigation ul.nav li {
padding: 5px 15px;
}
#navigation ul.nav li.active {
background-color: deeppink;
border-radius: 25px;
font-weight: bold;
-webkit-box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
margin-left: 5px;
}
#slider {
width: 100vw;
height: 75vh;
margin: 0 auto;
position: relative;
z-index: 1000;
}
#slider::before {
content: '';
top: 0%;
right: 0%;
bottom: 0%;
left: 0%;
position: absolute;
background: black;
background: -webkit-gradient(linear, left bottom, left top, from(black), color-stop(25%, rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0)));
background: linear-gradient(0deg, black 0%, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0) 100%);
}
#slider .logo {
padding: 15px;
position: absolute;
font-family: 'Dancing Script', cursive;
font-size: 30px;
color: #fff;
text-shadow: 0 0 10px deeppink;
}
#slider .image {
height: 100%;
background-image: url(../../markus-spiske-QmEF-d1HQVI-unsplash.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#slider .content {
position: absolute;
bottom: 10%;
right: 5%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
#slider .content .title {
width: 100%;
}
#slider .content .title h3 {
text-align: center;
color: deeppink;
min-width: 100px;
padding: 5px;
border-radius: 10px;
font-size: 18px;
margin: 10px 0;
}
#slider .content .description {
max-width: 100%;
position: relative;
overflow-wrap: break-word;
}
#slider .content .description p {
text-align: center;
color: #fff;
font-size: 14px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
-webkit-text-fill-color: transparent;
}
#slider .content button {
background-color: deeppink;
border: none;
border-radius: 4px;
margin: 10px 0;
padding: 5px 10px;
text-transform: uppercase;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
cursor: pointer;
-webkit-box-shadow: 0 0 15px rgba(255, 255, 255, 0.25);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.25);
}
/*# sourceMappingURL=main.css.map */
<body>
<div id="app">
<div id="slider">
<div class="logo">MovieApp</div>
<div class="image"></div>
<div class="content">
<div class="title"><h3>- Title -</h3></div>
<div class="description">
<p>
description description description description description
description description description description description
description description description description description
description description description description description
description description description description description
description description description description description
description description description description description
description description description description description
description description description description description
description description description
</p>
</div>
<button>More</button>
</div>
</div>
<div id="navigation">
<ul class="nav">
<li data-category="top" class="nav-item active">Top</li>
<li data-category="comedy" class="nav-item">Comedy</li>
<li data-category="horror" class="nav-item">Horror</li>
<li data-category="documentary" class="nav-item">Documentary</li>
<li data-category="thriller" class="nav-item">Thriller</li>
<li data-category="musical" class="nav-item">Musical</li>
</ul>
<div class="search"></div>
</div>
<div id="movies">
<div class="slider-btns">
<i class="fa fa-angle-left"></i>
<i class="fa fa-angle-right"></i>
</div>
<div class="categories">
<div data-category="comedy" class="category">
<div class="movies">
<div data-item="1" class="movie active">
<div class="image"></div>
<div class="title">Title 1</div>
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
<div data-item="2" class="movie">
<div class="image"></div>
<div class="title">Title 2</div>
<div class="content">Content</div>
</div>
<div data-item="3" class="movie">
<div class="image"></div>
<div class="title">Title 3</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="4" class="movie">
<div class="image"></div>
<div class="title">Title 4</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="5" class="movie">
<div class="image"></div>
<div class="title">Title 5</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
</div>
</div>
<div data-category="horror" class="category">
<div class="movies">
<div data-item="1" class="movie">
<div class="image"></div>
<div class="title">Title 1</div>
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
<div data-item="2" class="movie">
<div class="image"></div>
<div class="title">Title 2</div>
<div class="content">Content</div>
</div>
<div data-item="3" class="movie">
<div class="image"></div>
<div class="title">Title 3</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="4" class="movie">
<div class="image"></div>
<div class="title">Title 4</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="5" class="movie">
<div class="image"></div>
<div class="title">Title 5</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
</div>
</div>
<div data-category="documentary" class="category">
<div class="movies">
<div data-item="1" class="movie">
<div class="image"></div>
<div class="title">Title 1</div>
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
<div data-item="2" class="movie">
<div class="image"></div>
<div class="title">Title 2</div>
<div class="content">Content</div>
</div>
<div data-item="3" class="movie">
<div class="image"></div>
<div class="title">Title 3</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="4" class="movie">
<div class="image"></div>
<div class="title">Title 4</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="5" class="movie">
<div class="image"></div>
<div class="title">Title 5</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
</div>
</div>
<div data-category="thriller" class="category">
<div class="movies">
<div data-item="1" class="movie">
<div class="image"></div>
<div class="title">Title 1</div>
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
<div data-item="2" class="movie">
<div class="image"></div>
<div class="title">Title 2</div>
<div class="content">Content</div>
</div>
<div data-item="3" class="movie">
<div class="image"></div>
<div class="title">Title 3</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="4" class="movie">
<div class="image"></div>
<div class="title">Title 4</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="5" class="movie">
<div class="image"></div>
<div class="title">Title 5</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
</div>
</div>
<div data-category="musical" class="category">
<div class="movies">
<div data-item="1" class="movie">
<div class="image"></div>
<div class="title">Title 1</div>
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
<div data-item="2" class="movie">
<div class="image"></div>
<div class="title">Title 2</div>
<div class="content">Content</div>
</div>
<div data-item="3" class="movie">
<div class="image"></div>
<div class="title">Title 3</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="4" class="movie">
<div class="image"></div>
<div class="title">Title 4</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="5" class="movie">
<div class="image"></div>
<div class="title">Title 5</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
I tried to fix this problem multiple times but it still occurs, I just can't find the right fix.
I cannot create gutter around columns in Bootstrap 3. Here's my Fiddle: jsfiddle.net/creuxttL
My exact problem: When I create these three columns, I expect some gutter to be between them, so they don't look like one big brick. I don't get any gutter by default, so I tried to do it manually - with css class .col . I still don't get any margin/padding around the boxes. What should I do?
You're fiddle does not have bootstrap 3 included. http://jsfiddle.net/va94exo2/ is a slight modification.
Have wrapped all of your col-md-4 content with an inner div and changed the ID="row" to class and removed your extra .col class, have also then styled the inner div.
.inner-content{
font-family: 'Roboto', sans-serif;
font-weight: 100;
color: white;
text-align: center;
background-color: #00b9ff;
border: 1px solid black;
}
.overlay-pic {
max-height: 200px;
display: block;
margin: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #44cbff;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.overlay p {
font-family: 'Raleway';
font-style: italic;
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.col {
/*gutter*/
padding-right: 7px;
padding-left: 7px;
}
.col:not(:first-child, :last-child) {
padding-right: 7px;
padding-left: 7px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" style="margin-top: 10px;">
<div class="col-md-4">
<div class="inner-content">
<h1>Festival 2001</h1>
<img src="event.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Our event.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="inner-content">
<h1>Who are we?</h1>
<img src="question.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Read more about us</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="inner-content">
<h1>where, when?</h1>
<img src="calendar.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Look at our calendar.</p>
</div>
</div>
</div>
</div>
</div>
Not positive this is exactly what you're looking for but if you just want space between the rows you can add a "margin-top" attribute to your css in the ".col-md-4" class.
Hope this helps.
.col-md-4 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
color: white;
text-align: center;
background-color: #00b9ff;
border: 1px solid black;
margin-top:10px;
}
.overlay-pic {
max-height: 200px;
display: block;
margin: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #44cbff;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.overlay p {
font-family: 'Raleway';
font-style: italic;
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.col {
/*gutter*/
padding-right: 7px;
padding-left: 7px;
}
.col:not(:first-child, :last-child) {
padding-right: 7px;
padding-left: 7px;
}
<div class="container">
<div id="row" style="margin-top: 10px;">
<div class="col-md-4 col">
<h1>Festival 2001</h1>
<img src="event.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Our event.</p>
</div>
</div>
<div class="col-md-4 col">
<h1>Who are we?</h1>
<img src="question.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Read more about us</p>
</div>
</div>
<div class="col-md-4 col">
<h1>where, when?</h1>
<img src="calendar.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Look at our calendar.</p>
</div>
</div>
</div>
</div>
Bootstrap is not added. I modified your code. And I hope you are expecting this.
.col {
font-family: 'Roboto', sans-serif;
font-weight: 100;
color: white;
text-align: center;
background-color: white;
}
.overlay-pic {
max-height: 200px;
display: block;
margin: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #44cbff;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.overlay p {
font-family: 'Raleway';
font-style: italic;
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.col h1{
margin-top:0px;
}
<div class="container">
<div id="row">
<div class="col-md-4 col">
<div style="margin:5px; background:#00b9ff;border: 1px solid black;">
<h1>Festival 2001</h1>
<img src="event.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Our event.</p>
</div>
</div>
</div>
<div class="col-md-4 col">
<div style="margin:5px; background:#00b9ff;border: 1px solid black;">
<h1>Who are we?</h1>
<img src="question.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Read more about us</p>
</div></div>
</div>
<div class="col-md-4 col">
<div style="margin:5px; background:#00b9ff;border: 1px solid black;">
<h1>where, when?</h1>
<img src="calendar.jpg" class="overlay-pic hidden-tablet img-responsive">
<div class="overlay">
<p>Look at our calendar.</p>
</div>
</div></div>
</div>
</div>
I need to alternate the background color of the class jl-member-info but this doesn’t work. I have this code:
.uk-grid .jl-member-item .jl-member-info:nth-child(odd) {
position: relative;
padding: 0 0.9rem;
background-color: rgba(0, 198, 197, 0.89);
width: 100%;
margin-top: -95px;
}
.uk-grid .jl-member-item .jl-member-info:nth-child(even) {
position: relative;
padding: 0 0.9rem;
background-color: #090963;
width: 100%;
margin-top: -95px;
}
<div class="jl-member ">
<div class=" uk-grid-large uk-grid uk-grid-width-small-1-2 uk-grid-width-medium-1-2 uk-grid-width-large-1-4" data-uk-grid-margin="">
<div class="jl-member-item default uk-row-first">
<div class="jl-member-item-img">
<img class="uk-overlay-spin" src="/templates/g5_helium/custom/images/Alain.jpg?595f26c4">
</div>
<div class="jl-member-info">
<div class="jl-member-name">Alain</div>
<div class="jl-member-role">Maire</div>
<div class="jl-member-desc"><span class="cloaked_email">mail#test.fr</span>
</div>
</div>
</div>
<div class="jl-member-item default">
<div class="jl-member-item-img">
<img class="uk-overlay-spin" src="/templates/g5_helium/custom/images/Alain.jpg?595f26c4">
</div>
<div class="jl-member-info">
<div class="jl-member-name">Alain</div>
<div class="jl-member-role">Maire</div>
<div class="jl-member-desc"><span class="cloaked_email">mail#test.fr</span>
</div>
</div>
</div>
<div class="jl-member-item default">
<div class="jl-member-item-img">
<img class="uk-overlay-spin" src="/templates/g5_helium/custom/images/Alain.jpg?595f26c4">
</div>
<div class="jl-member-info">
<div class="jl-member-name">Alain</div>
<div class="jl-member-role">Maire</div>
<div class="jl-member-desc"><span class="cloaked_email">mail#test.fr</span>
</div>
</div>
</div>
</div>
</div>
You need to recode like this, because you have only one .jl-member-info in .jl-member-item it will always be odd!
.uk-grid .jl-member-item .jl-member-info {
position: relative;
padding: 0 0.9rem;
width: 100%;
margin-top: -95px;
background-color: #090963;
}
.uk-grid .jl-member-item:nth-child(odd) .jl-member-info {
background-color: rgba(0, 198, 197, 0.89);
}
I have list items with text and they have a plus icon in a circle after them done with the pseudo-element :before. How could I center all the plus icons?
.advantages .item-list-section .item {
position: relative;
margin-bottom: 15px;
}
.advantages .item-list-section .item .inner {
position: relative;
display: inline-block;
}
.advantages .item-list-section .item .inner:after {
position: absolute;
font-family: 'FontAwesome';
content: "\f067";
color: #ef6611;
width: 14px;
height: 14px;
border: 1px solid;
border-radius: 30px;
top: 5px;
right: -30px;
font-size: 8px;
line-height: 14px;
text-align: center;
display:block;
}
.advantages .item-list-section .item .inner.bottom-icon:after {
top: 100%;
margin-top: -18px;
}
.advantages .item-list-section .item.active .inner:after {
background: #f13a01;
color: #ffffff;
content: "\f068";
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<section class="advantages primary">
<div class="container">
<div class="row">
<div class="col-sm-3 col-sm-offset-1 item-list-section">
<div class="item-list">
<div class="item">
<div class="inner">
<p>Продолжительный<br/>
срок службы</p>
</div>
</div>
<div class="item">
<div class="inner">
<p>Компактные<br/>
размеры</p>
</div>
</div>
<div class="item active">
<div class="inner">
<p>Насос с сухим ротором</p>
</div>
</div>
<div class="item">
<div class="inner">
<p>Котел способен стабильно<br/>работать даже при самом<br/>низком давлении</p>
</div>
</div>
<div class="item">
<div class="inner">
<p>Встроенная защита от<br/>
перепадов напряжения</p>
</div>
</div>
<div class="item">
<div class="inner">
<p>Надежная система<br/>
безопасности</p>
</div>
</div>
<div class="item">
<div class="inner">
<p>Наличие аварийных<br/>
режимов работы</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Update Css
.advantages .item-list-section .item .inner:after {
position: absolute;
font-family: 'FontAwesome';
content: "\f067";
color: #ef6611;
width: 14px;
height: 14px;
border: 1px solid;
border-radius: 30px;
top: 5px;
right: -30px;
font-size: 8px;
line-height: 16px;
text-align: center;
display:block;
}
Live Demo Here
I need some help with bootstrap gutter width, I've tried almost everything and still can't make bigger space/padding between triangles with i want to make much bigger. Tried adding classes etc..
here's clean code
Media
#media only screen and (max-width : 1200px) {
/* Team */
.team-item .team-triangle {
width: 90px;
height: 90px;
}
.team-triangle .content {
width: 160px;
height: 160px;
}
.team-hover i {
margin-top: 50px;
}
.team-hover p {
font-size: 14px;
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
/* Team */
.team-item .team-triangle {
width: 120px;
height: 120px;
}
.team-triangle .content {
width: 190px;
height: 190px;
}
.team-hover i {
margin-top: 57px;
}
#team-section .col-md-2:nth-child(7n+5),
#team-section .col-md-2:nth-child(7n+1){
margin-left: 0 !important;
clear: none !important;
}
#team-section .col-md-2 {
float: left;
margin-bottom: 80px;
width: 33.3333%;
}
HTML
div class="container">
<div class="row">
<div class="team-items">
<div class="col-md-2 col-sm-6">
<div class="team-container wow bounceIn" data-wow-delay="0.2s">
<div class="team-item">
<div class="team-triangle">
<div class="content">
<img src="img/team/1.jpg" alt="title" />
<div class="team-hover text-center">
<a class="overlay" href="#"></a>
<i class="fa fa-male"></i>
<p>Plalalal</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="team-container wow bounceIn" data-wow-delay="0.3s">
<div class="team-item">
<div class="team-triangle">
<div class="content">
<img src="img/team/1.jpg" alt="title"/>
<div class="team-hover text-center">
<i class="fa fa-female"></i>
<p>Jane Doe</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="team-container wow bounceIn" data-wow-delay="0.4s">
<div class="team-item">
<div class="team-triangle">
<div class="content">
<img src="img/team/1.jpg" alt="title"/>
<div class="team-hover text-center">
<i class="fa fa-male"></i>
<p>John Doe</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="team-container wow bounceIn" data-wow-delay="0.5s">
<div class="team-item">
<div class="team-triangle">
<div class="content">
<img src="img/team/1.jpg" alt="title"/>
<div class="team-hover text-center">
<i class="fa fa-male"></i>
<p>John Doe</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<a class="overlay" href="#"></a>
<div class="team-container wow bounceIn" data-wow-delay="0.6s">
<div class="team-item">
<div class="team-triangle">
<div class="content">
<img src="img/team/1.jpg" alt="title"/>
<div class="team-hover text-center">
<i class="fa fa-male"></i>
<p>John Doe</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
/* ===== Begin team ===== */
.team-item {
height: 130px;
}
.team-item .team-triangle {
width: 130px;
height: 130px;
background: transparent;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: 0 auto;
position: relative;
top: 25px;
box-shadow: 0 0 0 6px #FFFFFF, 0 0 0 7px #dadbdb;
overflow: hidden;
}
.team-item img {
max-width: 100%;
}
.team-items {
margin-bottom: 50px;
padding-top: 0px;
margin-top: 0;
}
.team-triangle .content {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: -35px;
position: absolute;
left: -37px;
width: 190px;
height: 190px;
}
.team-hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba( 103, 109, 117, 0.9);
opacity: 0;
-webkit-transition: opacity 0.4s ease-in; /* For Safari 3.1 to 6.0 */
transition: opacity 0.4s ease-in;
}
.team-item .team-triangle:hover .team-hover {
opacity: 1;
}
.team-hover i {
color: rgba(255, 255, 255,.75);
font-size: 28px;
margin-top: 57px;
position: relative;
}
.team-hover p {
color: #ffffff;
font-size: 16px;
font-weight: 400;
margin-top: 0;
}
.team-items .col-md-2:nth-child(7n+5) {
clear: left;
margin-left: 24.9999999%;
}
.team-items .col-md-2:nth-child(7n+1) {
clear: left;
margin-left: 16.6666666%;
}
/* ===== End team ===== */
Maybe you want something like this.
.large-gutter > [class*='col-'] {
padding-right:50px;
padding-left:50px;
}
HTML
<div class="row large-gutter">
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
</div>