Luiz Luiz - 12 days ago 3
CSS Question

Center images filtered with MixItUp plugin

Explanation



I'm working on this template which uses MixItUp plugin in it.
Basically, I have one simple, but difficult (at least for me, because I'm new to web dev) doubt that I'm trying to solve without success: I'd like to center the "filtered images".

enter image description here




Code



You can access it at CodePen here (for some reason CodePen wouldn't load an image other than the second one, so all of the 6 images at CodePen are the same).

You can also download it here.






$(document).ready(function() {

/* ======================================================================== */
/* Filtering
/* ========================================================================= */

$(".project-wrapper").mixItUp();

});

/*=========================================
Basic Style
==========================================*/

body {
line-height: 21px;
font-size: 13px;
}

ol, ul {
margin: 0;
padding: 0;
list-style: none;
}

a, a:focus, a:hover {
text-decoration: none;
}

body>section, .footer {
padding: 70px 0;
}


/*=========================================
Mix
==========================================*/

.work-filter {
margin-bottom: 35px;
}

.work-filter ul li {
display: inline-block;
}

.work-filter ul li a {
color: #062033;
display: block;
padding: 5px 17px;
}

.work-filter ul li a:hover, .work-filter ul li a.active {
background-color: rgba(31, 107, 76, 1);
color: #fff;
}

.mix {
display: none;
}

.work-item {
float: left;
width: 25%;
position: relative;
}

.work-item>img {
display: block;
height: 100%;
width: 100%;
}



/*=========================================
Media Queries
==========================================*/



/*============================================================
For Small Desktop
==============================================================*/

@media (min-width: 980px) and (max-width: 1150px) {

/* work */

}


/*============================================================
Tablet (Portrait) Design for a width of 768px
==============================================================*/

@media (min-width: 768px) and (max-width: 979px) {

/* work */

.work-item {
float: left;
width: 33%;
}

}


/*============================================================
Mobile (Portrait) Design for a width of 320px
==============================================================*/

@media only screen and (max-width: 767px) {

/* work */

.work-item {
float: left;
left: 5% !important;
width: 90%;
}

}


/*============================================================
Mobile (Landscape) Design for a width of 480px
==============================================================*/

@media only screen and (min-width: 480px) and (max-width: 767px) {

/* work */

.work-item {
left: inherit !important;
width: 50%;
}

}

<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
<!-- meta charec set -->
<meta charset="utf-8">
<!-- Page Title -->
<title>MixItUp</title>

<!--=========================================
CSS
=========================================-->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Main Stylesheet -->
<link rel="stylesheet" href="css/main.css">


<!--=========================================
Essential jQuery Plugins
=========================================-->
<!-- Main jQuery -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- jquery.mixitup.min -->
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
<!-- Custom Functions -->
<script src="js/custom.js"></script>
</head>

<body id="body">

<section>
<div class="container">
<div class="row">

<div class="work-filter">
<ul class="text-center">
<li><a href="javascript:;" data-filter="all" class="active filter">All</a></li>
<li><a href="javascript:;" data-filter=".mix1" class="filter">Mix1</a></li>
<li><a href="javascript:;" data-filter=".mix2" class="filter">Mix2</a></li>
<li><a href="javascript:;" data-filter=".mix3" class="filter">Mix3</a></li>
<li><a href="javascript:;" data-filter=".mix4" class="filter">Mix4</a></li>
<li><a href="javascript:;" data-filter=".mix5" class="filter">Mix5</a></li>
<li><a href="javascript:;" data-filter=".mix6" class="filter">Mix6</a></li>
</ul>
</div>

</div>
</div>

<div class="project-wrapper">

<figure class="mix work-item mix1">
<img src="http://imgur.com/KZfjrVT.jpg" alt="">
</figure>

<figure class="mix work-item mix2">
<img src="http://imgur.com/GB54YZR.jpg" alt="">
</figure>

<figure class="mix work-item mix3">
<img src="http://imgur.com/afatbzS.jpg" alt="">
</figure>

<figure class="mix work-item mix4">
<img src="http://imgur.com/GvjT75d.jpg" alt="">
</figure>

<figure class="mix work-item mix5">
<img src="http://imgur.com/KJ9MaK6.jpg" alt="">
</figure>

<figure class="mix work-item mix6">
<img src="http://imgur.com/w3ZFVnq.jpg" alt="">
</figure>

</div>

</section>

</body>

</html>








Thanks in advance,

Luiz.

Answer

Try:

.project-wrapper {
    text-align:center;
}

.work-item {
    float: none;
    width: 33%;
    position: relative;
}
Comments