Want to make it responsive, and the information on the elements in the first line (1-4) is required to show only under the first row, on the mobile it will be two or one element Information about the elements from the second row (5-8) under the second row In the screenshots I tried to show how I would like to see this
$(".items .item").click(function() { // Клик по айтему
$(".items .item").removeClass("active").eq($(this).index()).addClass('active');
$(".hidden-block .item-content").slideUp().eq($(this).index()).slideDown();
});
.items {
font-size: 0px;
}
.item:nth-child(2n) {
background: #e6e4e3;
}
.item {
background: #f2f1f0;
}
.items img {
filter: grayscale(80%);
transition: all 0.4s;
height: 100px;
}
.items img:hover {
filter: grayscale(0%);
}
.items .item {
padding-top: 25px;
display: inline-block;
width: 25%;
height: 150px;
box-sizing: border-box;
font-size: 24px;
text-align: center;
float: left;
cursor: pointer;
}
.item-content {
width: 70%;
margin: 0 auto;
display: block;
height: 400px;
}
.right,
.left {
width: 50%;
float: left;
padding-top: 40px;
}
.hidden-block .item-content {
display: none;
font-size: 16px;
color: #000;
}
.items .item.active {
background: #00000061;
}
.items .item.active+.hidden-block {
display: block;
}
#media screen and (max-width: 320px) {
.items .item {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="items">
<div class="item"><img src="https://cdn.svgporn.com/logos/html-5.svg"></div>
<div class="item"><img src="https://cdn.svgporn.com/logos/css-3.svg"></div>
<div class="item"><img src="https://cdn.svgporn.com/logos/html-5.svg"></div>
<div class="item"><img src="https://cdn.svgporn.com/logos/css-3.svg"></div>
</div>
<br clear="all" />
<div class="hidden-block">
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/html-5.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/css-3.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/html-5.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/css-3.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
</div>
<br clear="all" />
<div class="items">
<div class="item"><img src="https://cdn.svgporn.com/logos/html-5.svg"></div>
<div class="item"><img src="https://cdn.svgporn.com/logos/css-3.svg"></div>
<div class="item"><img src="https://cdn.svgporn.com/logos/html-5.svg"></div>
<div class="item"><img src="https://cdn.svgporn.com/logos/css-3.svg"></div>
</div>
<br clear="all" />
<div class="hidden-block">
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/html-5.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/css-3.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/html-5.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/css-3.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
</div>
How must ork first row
How must work second row
Related
I have product layout page. Products will be displayed on this page, along with a picture, person's name, title, and description. However, all of those image, title, and description will have the same link, while the person name will have a separate link.
The problem is when i add "href" to the whole div, it also cover the person name and it work as the single link.
How can i make it cover for the whole product card with one link and, only person name for the another link.
By inspecting the first and second product cards, you may execute the code and locate my current problem.
.person {
position: relative;
top: 5px;
left: 10px;
color: #000000;
font-family: "Arial";
font-size: 15px;
margin-bottom: -20px;
}
.well {
background: transparent;
border-style: none;
}
.item {
width: 250px !important;
padding: 0;
margin-top: 50px;
margin: 19px;
box-shadow: 1px 5px 15px #CCC;
}
.col-md-3:hover {
box-shadow: 1px 5px 25px #ccc;
}
.thumbnail {
margin-bottom: 0px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.p-title {
margin-top: 10px;
font-weight: bolder;
font-family: "Arial";
font-size: 16px;
}
.lead {
position: relative;
font-family: "Arial";
font-size: 15px;
margin-bottom: 25px;
}
.img-id {
object-fit: cover !important;
object-position: center;
height: 250px !important;
width: 100% !important;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
<!-- partial:index.partial.html -->
<div class="container">
<div class="well well-sm">
<div id="view" class="btn-group">
</div>
<div id="products" class="row list-group">
<!-- Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- end Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<!-- partial:index.partial.html -->
Please check the second card which I updated
It's not a good practice to wrap a div with a tag since div is a block element though it will work. So you can simply add a onclick event to direct to a link and add a cursor pointer styling to let your audience is aware of the link and then wrap the name tag with an tag with another link.
.person {
position: relative;
top: 5px;
left: 10px;
color: #000000;
font-family: "Arial";
font-size: 15px;
margin-bottom: -20px;
}
.well {
background: transparent;
border-style: none;
}
.item {
width: 250px !important;
padding: 0;
margin-top: 50px;
margin: 19px;
box-shadow: 1px 5px 15px #ccc;
}
.col-md-3:hover {
box-shadow: 1px 5px 25px #ccc;
}
.thumbnail {
margin-bottom: 0px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.p-title {
margin-top: 10px;
font-weight: bolder;
font-family: "Arial";
font-size: 16px;
}
.lead {
position: relative;
font-family: "Arial";
font-size: 15px;
margin-bottom: 25px;
}
.img-id {
object-fit: cover !important;
object-position: center;
height: 250px !important;
width: 100% !important;
}
#card-2 {
cursor: pointer;
}
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
/><link rel="stylesheet" href="./style.css" />
<!-- partial:index.partial.html -->
<div class="container">
<div class="well well-sm">
<div id="view" class="btn-group"></div>
<div id="products" class="row list-group">
<!-- Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg"
alt=""
/>
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- end Single product -->
<div
id="card-2"
class="item col-xs-4 col-md-3"
onclick="window.location='https://www.youtube.com'"
>
<div class="thumbnail">
<img
class="img-id"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg"
alt=""
/>
<div class="person">
<a href="https://www.linkedin.com/">
<p class="person-name">Person Name</p>
</a>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80"
alt=""
/>
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png"
alt=""
/>
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<!-- partial:index.partial.html -->
</div>
</div>
</div>
I have made a dropdown menu with parent and child rows to display certain controls. I am unable to get the width of the Accordion (which is set to 100%) to actually stretch the entirety. I used the Chrome and Edge built in developer tools to inspect the HTML and find out what element has a width set which is preventing my rows from growing.
Here is what the dropdown currently looks like on my SharePoint page. I want it and its contents to stretch all the way across the page, but instead it is only stretching halfway?
Here is my JSFiddle test case: https://jsfiddle.net/tb36jsew/2/
$(document).ready(function(){
$('.retro').accordion();
});
.ui.styled.accordion .accordion .title, .ui.styled.accordion .title {
color: black;
background-color: #eee;
cursor: pointer;
padding: 18px;
width: 200%;
height: auto;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.5s;
}
.title{
width: 200%;
height: auto;
}
.title.drop{
width: 100%;
}
.content{
width: 100%;
height: auto;
}
.ui.styled.accordion {
width: 200%;
height: auto;
}
.ui.stackable.grid.container.retro{
width: 200%;
height: auto;
}
.one.column.row{
width: 200%
height: auto;
}
.ui.styled.accordion .accordion .title, .ui.styled.accordion .title:hover {
color: #f2711c;
}
a.previous {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
a:link, a:visited {
color: #b3ab7d;
}
a.previous:hover {
background-color: #104723;
color: #b3ab7d;
}
.backbtn{
padding-left: 0px;
padding-top: 10px;
}
.previous {
background-color: #104723;
color: #b3ab7d;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui#2.3.1/dist/semantic.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.3.1/dist/semantic.min.css">
<div class="ui stackable grid container retro">
<div class="one column row">
<div class="column">
<div class="ui styled accordion"> <!-- Accordion parent -->
<div class="title"><i class="dropdown icon"></i>Level 2</div>
<div class="content">
<div class="ui divider"></div>
<div class="ui stackable grid container">
<div class="one column row">
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.041 Ensure that the actions of individual system users can be uniquely traced to those users so they can be held accountable for their actions.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.042 Create and retain system audit logs and records to the extent needed to enable the monitoring, analysis, investigation, and reporting of unlawful or unauthorized system activity.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.043 Provide a system capability that compares and synchronizes internal system clocks with an authoritative source to generate time stamps for audit records.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.044 Review audit logs.</div>
<div class="content">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="one column row">
<div class="column">
<div class="ui styled accordion"> <!-- Accordion parent -->
<div class="title"><i class="dropdown icon"></i>Level 3</div>
<div class="content">
<div class="ui divider"></div>
<div class="ui stackable grid container">
<div class="one column row">
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.3.045 Review and update logged events.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.3.046 Alert in the event of an audit logging process failure.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.3.048 Collect audit information (e.g., logs) into one or more central repositories.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.3.049 Protect audit information and audit logging tools from unauthorized access, modification, and deletion.</div>
<div class="content">
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.3.050 Limit management of audit logging functionality to a subset of privileged users.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.3.051 Correlate audit record review, analysis, and reporting processes for investigation and response to indications of unlawful, unauthorized, suspicious, or unusual activity.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.3.052 Provide audit record reduction and report generation to support on-demand analysis and reporting.</div>
<div class="content">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="backbtn">
« Go Back
</div>
First of all you need to add a closing div before .backbtn in the html
</div>
<div class="backbtn">
then in css:
add width: auto; in .ui.styled.accordion .accordion .title, .ui.styled.accordion .title
remove all width: 200; height: auto
most important add following at the end of your css
.ui.styled.accordion{
width: auto !important;
}
You need it to override semantic-ui
Fiddle: https://jsfiddle.net/yvbenitah/sg06x4rc/4/
i want to ask, i have a problem in my owl carousel.
I want to make a center drag slider with the owl carousel, when I've made the code, the items are vertical not horizontal. what's wrong? I've also included a
Codepen
Is the owl carousel not automatic like the slick carousel? If you know, please help me. I need your help, because this is my first time using the owl carousel
HTML
<div class="slider-news">
<div class="item">
<div class="card secondary-card">
<div class="card-img-top">
<div class="d-flex" id="tags">
<div class="tags yellow">Article</div>
<div class="tags yellow">IT Services</div>
</div>
</div>
<div class="card-body">
<div class="title">
<h2>
3 Tantangan Umum ketika Melakukan IT Outsourcing
</h2>
</div>
</div>
</div>
</div>
<div class="item">
<div class="card secondary-card">
<div class="card-img-top">
<div class="d-flex" id="tags">
<div class="tags yellow">Article</div>
<div class="tags yellow">IT Services</div>
</div>
</div>
<div class="card-body">
<div class="title">
<h2>
3 Tantangan Umum ketika Melakukan IT Outsourcing
</h2>
</div>
</div>
</div>
</div>
<div class="item">
<div class="card secondary-card">
<div class="card-img-top">
<div class="d-flex" id="tags">
<div class="tags yellow">Article</div>
<div class="tags yellow">IT Services</div>
</div>
</div>
<div class="card-body">
<div class="title">
<h2>
3 Tantangan Umum ketika Melakukan IT Outsourcing
</h2>
</div>
</div>
</div>
</div>
<div class="item">
<div class="card secondary-card">
<div class="card-img-top">
<div class="d-flex" id="tags">
<div class="tags yellow">Article</div>
<div class="tags yellow">IT Services</div>
</div>
</div>
<div class="card-body">
<div class="title">
<h2>
3 Tantangan Umum ketika Melakukan IT Outsourcing
</h2>
</div>
</div>
</div>
</div>
<div class="item">
<div class="card secondary-card">
<div class="card-img-top">
<div class="d-flex" id="tags">
<div class="tags yellow">Article</div>
<div class="tags yellow">IT Services</div>
</div>
</div>
<div class="card-body">
<div class="title">
<h2>
3 Tantangan Umum ketika Melakukan IT Outsourcing
</h2>
</div>
</div>
</div>
</div>
</div>
SCSS
.card{
border: none;
border-radius: 20px;
&.secondary-card{
border-radius: 10px;
overflow: hidden;
box-shadow: 0px 13px 26px rgba(0,0,0,0.07);
.card-img-top{
height: 250px;
position: relative;
background-color:#c1c1c1;
#tags{
position: absolute;
top: 20px;
left: 20px;
.tags{
&:nth-child(1){
margin-right: 10px;
}
}
}
}
.card-body{
padding: 40px 30px;
.title{
h2{
position: relative;
font-size: 20px;
line-height: 27px;
&::before{
content: '';
position: absolute;
left: 0;
bottom: -10px;
height:4px;
width:23px;
background-color: red;
}
}
}
}
}
}
.tags{
display: flex;
justify-content: center;
align-items: center;
padding: 5px 8px;
color: #fff;
font-size: 13px;
&.yellow{
background-color: yellow;
}
}
JS
$(document).ready(function() {
$('.slider-news').owlCarousel({
center: true,
items: 4,
loop: false,
margin: 10,
nav:false,
dots:false,
// responsive: {
// 600: {
// items: 4
// }
// }
});
});
Hello instead of using the class .slider-news try using the owl-carousel on your mark up and javascript. I think it has some default styling on the libary. I worked on this library before and I used owl carousel. If you want custom style you can use a secondary class on owl carousel.
This is the the link on the codepen I edited.
I am building platform with template like a https://pinterest.com and
I have html structure like this:
<div class="main">
<div class="content">
<div class="content_publisher">
</div>
<div class="content-text">
</div>
</div>
</div>
And i have style.css like this:
body {
width:1358px;
}
.main {
column-width:339.33px;
column-gap: 0;
column-count:4;
position:relative;
top:50px;
width:100%;
}
.content {
display:block;
margin-bottom:10px;
width:337px;
-webkit-box-shadow:inset 0px 0px 10px;
}
My page is devided to 4 columns... Look at the image you will understand what i want exaclty..
https://i.stack.imgur.com/fPfDp.png As you can see at the end of the column, The column is separating divs inside in content div..
Use display: inline-block on .content.
body {
width: 1358px;
}
.main {
column-width: 339.33px;
column-gap: 0;
column-count: 4;
position: relative;
top: 50px;
width: 100%;
}
.content {
display: inline-block;
margin-bottom: 10px;
width: 337px;
-webkit-box-shadow: inset 0px 0px 10px;
height: 200px;
background: #eee;
}
.content:nth-child(odd) {
height: 150px;
}
<div class="main">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
I'm trying to use Masonry, but it doesn't seem to work well. It leaves a lot of empty spaces. as you can see here
I already tried various other ways to implement Masonry, but this one leans the most to the result. Can someone help this rookie?
Here what I think is important of my HTML/ CSS/ JAVASCRIPT
<script src="masonry-docs/js/masonry.pkgd.min.js"></script>
<script type="text/javascript">// Javascript
var container = document.querySelector('#masonry-grid');
var msnry = new Masonry( container, {
// options
columnWidth: 33%,
itemSelector: '.grid-item'
});</script>
.grid-item{width: 33%;}
.grid-item--width2{width: 33%;}
.grid-item--width3{width: 33%;}
*{box-sizing:border-box;}
.box-sizing:border-box;
.grid:after {
content: '';
display: block;
clear: both;
}
.grid-item {
width: 33%;
float: left;
border: 5px solid #FFFFFF;
}
.grid-sizer,
.grid-item {
width: 33%;
}
<section id="werk">
<div class="container">
<div class="grid">
<div class="item">
<div id="masonry-grid">
<div class="grid-item">
<h3>Manifesta 10</h3>
<span class="category">huisstijl</span>
<img src="images/manifesta.jpg" alt="" />
</div>
<div class="item">
<div class="grid-item grid-item--width2">
<h3>Deutsche Grammophon</h3>
<span class="category">platenhoezen</span>
<img src="images/GIF_1.gif" alt="" />
</div>
</div>
<div class="item">
<div class="grid-item grid-item--width3">
<h3>Ghent Art Book Fair</h3>
<span class="category">poster</span>
<img src="images/boekposter.png" alt="" />
</div>
</div>
<div class="item">
<div class="grid-item">
<h3>teaser masterproef</h3>
<span class="category">foto</span>
<img src="images/masterproef.png" alt="" />
</div>
</div>
<div class="item">
<div class="grid-item grid-item--width2">
<h3>Mundaneum</h3>
<span class="category">publicatie</span>
<img src="images/Mundaneum.gif" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
Your h3 Element has a margin, add this a the beginning of your CSS-Code:
h3 { margin: 0px; }
Your .grid-item has a border of 5px, change it in your CSS-Code:
.grid-item {
width: 33%;
float: left;
border: 0px solid #FFFFFF;
}