Reputation: 57
I'm working on a portfolio for a friend. The tiles for each portfolio item do not align properly, there is an odd space after the 3rd tile which causes the fourth item to stick out. This makes the 6th item not fit in.
Screenshot:
Code:
<!-- UX Works container -->
<div id="work" class="container">
<h2>UX Projects</h2>
<ul class="work-images">
<li> <!-- THREE ITEMS -->
<div><a class="fancybox-thumb" rel="fancybox-thumb" href="interaction-design.html" title="Image 01"><img src="img/1-thumb.jpg"/></div>
<div class="thumbnone">Wearable G-Scope Interaction Design project</div></a>
</li>
<li>
<div><a class="fancybox-thumb" rel="fancybox-thumb" href="information-architecture.html"><img src="img/2-thumb.jpg" />
</a>
<div class="thumbnone">Information Architecture for Instant Noodles E-Store</div>
</div>
</li>
<li>
<div><a class="fancybox-thumb" rel="fancybox-thumb" href="research-critique.html"><img src="img/3-thumb.jpg" />
</a>
<div class="thumbnone">Review of CHI2014 paper Quantifying Visual Preferences </div></div>
</li>
<li> <!-- THREE ITEMS -->
<div><a class="fancybox-thumb" rel="fancybox-thumb" href="requirements-engineering.html"><img src="img/3-1-thumb.jpg" />
</a>
<div class="thumbnone">Requirements modelling for Amazon Drone </div></div>
</li>
<li>
<div><a class="fancybox-thumb" rel="fancybox-thumb" href="inclusive-design.html"><img src="img/9-thumb.jpg" />
</a>
<div class="thumbnone">Inclusive design WCAG2.0 Poster </div></div>
</li>
<li>
EDIT** CSS - CODE:
/**** Work container *****/
ul.work-images li {
list-style:none;
display:inline-block;
margin: 8px 10px;
background:
}
ul.work-images li:first-child {
margin-left:0;
}
ul.work-images li:second-child {
margin-left:0;
}
ul.work-images li:third-child {
margin-left:0;
}
ul.work-images li div {
background:url(../img/eye.png) 50% 50% no-repeat;
background-color: #f04949;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
ul.work-images li img {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
ul.work-images li img:hover {
opacity:0.1;
}
Does anyone know what caused this?
Upvotes: 1
Views: 1295
Reputation: 83
Apparently you can get rid of this issue by setting <ul>
to font-size: 0;
and then setting font-size
on <li>
.
As seen here: A Space between Inline-Block List Items
Upvotes: 0
Reputation: 15
you've a lot of solutions to do
First you can use html bootstrap grid system here you're link http://getbootstrap.com/examples/grid/ and this solution will be good for you as you're making portfolio
another solution :
you can give your img element fixed width and height in example
<img src="img/1-thumb.jpg" style="width:320px;height:320px;"/>
and this will fix the problem of space you face
also you can give your <div>
width in your style
<div style="width:33%;">
Upvotes: 0
Reputation: 7910
This is caused by the margin on your ul.work-images li
style. A fix for it would be to remove the margin on the left-hand side like this:
ul.work-images li {
list-style: none;
display: inline-block;
margin: 8px 10px 8px 0px;
}
Upvotes: 2