Ryuk Ryuk - 6 months ago 14
HTML Question

Why is one of my gallery images out of place?

Here's a link to my site (Currently a work in progress so very basic right now):

website

I just can't figure out why one image is messed up. It's not even the last image in the gallery and it's the same size as all the other images. Maybe i'm missing the obvious, I'm pretty tired.

Here's the code: https://jsfiddle.net/b0r684hh/2/

HTML

<div class="row">
<div class="col-lg-10">
<h1 class="page-header">Ryk Design</h1>
</div>
<!--<div class="col-lg-2 page-header">
<ul class="nav navbar-nav">
<li>
<a class="invert" href="#">About</a>
</li>
<li>
<a class="invert" href="#">Contact</a>
</li>
</ul>
</div>-->
</div>

<div class="row">
<div id="photos">
<ul id="photo-gallery">
<li>
<a href="img/DoomQuoteMed.png">
<img src="img/thumbs/DoomQuoteThumb.png">
</a>
</li>
<li>
<a href="img/crop/SlaveBlur.png">
<img src="img/thumbs/SlaveBlur.png">
</a>
</li>
<li>
<a href="img/love wins2.png">
<img src="img/love wins2.png">
</a>
</li>
<li>
<a href="img/rd.png">
<img src="img/thumbs/rdcrop.png">
</a>
</li>
<li>
<a href="img/crop/taplrCrop.png">
<img src="img/thumbs/taplrCrop.png">
</a>
</li>
<li>
<a href="img/cider.jpg">
<img src="img/cider.jpg">
</a>
</li>
<!--<li>
<a href="http://40.media.tumblr.com/7302cf024c924726c6ad99bb80b0be41/tumblr_nauccbKUCw1tubinno1_1280.jpg">
<img src="http://40.media.tumblr.com/7302cf024c924726c6ad99bb80b0be41/tumblr_nauccbKUCw1tubinno1_1280.jpg">
</a>
</li>
<li>
<a href="http://41.media.tumblr.com/fddb3f2b0bdf390efd7ea87372e75fa5/tumblr_ndyg3pYbKW1tubinno1_1280.jpg">
<img src="http://41.media.tumblr.com/fddb3f2b0bdf390efd7ea87372e75fa5/tumblr_ndyg3pYbKW1tubinno1_1280.jpg">
</a>
</li>
<li>
<a href="http://41.media.tumblr.com/758a5cb9046fde53138ad0f55527ca25/tumblr_ndyfdoR6Wp1tubinno1_1280.jpg">
<img src="http://41.media.tumblr.com/758a5cb9046fde53138ad0f55527ca25/tumblr_ndyfdoR6Wp1tubinno1_1280.jpg">
</a>
</li>-->
</ul>
</div>
</div>


CSS

a,
h2,
h3 {
font-family: 'Montserrat', sans-serif;
margin: 0;
}

h1 {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 92px;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}

a {
color: #000;
}

.invert {
color: #fff;
background-color: #000;
}

.col-md-4 p {
padding-top: 5px;
}

a:hover {
color: #000;
background-color: #fff;
text-decoration: none;
}

.nav,
.navbar-nav {
margin: 0;
padding: 0;
}

body {
margin: 0;
}

.page-header {
border: none;
padding-bottom: 40px;
}

footer {
margin: 50px 0;
}

.row {
padding-left: 0;
}

#photos {
opacity: .88;
}

#photos img {
width: 30%;
float: left;
display: block;
margin: 1px;
}

ul {
list-style: none;
margin: 0px auto;
padding: 10px;
display: block;
max-width: 100%;
text-align: center;
}

#overlay {
background: rgba(0, 0, 0, .8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
text-align: center;
}

#overlay img {
margin: 10% auto 0;
width: 550px;
border-radius: 5px;
}

#photos {
width: 100%;
padding: 10px;
}

#photo-gallery {
width: 100%;
}


Cheers for the help guys!

Answer

You should float li elements instead of img elements, just change the css,

Here is the updated jsfiddle

#photos li {
  width: 30%;
  float: left;
  display: block;
  margin: 1px;
}

#photos img {
  max-width: 100%
}
Comments