Bucky Thomas Bucky Thomas - 5 months ago 21
CSS Question

How to make images display horizontally

im building a portfolio for one of my sites and downloaded a template, I managed to implement it into my own site but am struggling to display it horizontally right now its all vertically. My code is below:

HTML CODE

<div id="portfolio">
<div class="content center">
<h2>PORTFOLIO</h2>
<div class="borderline"></div>
</div>
<!--Portfolio grid-->

<ul class="portfolio-grid" id="portfolio-sidebar">


<li class="grid-item">
<img src="img/portfolio/1.jpg">
<a class="ajax-link" href="single.html">
<div class="grid-hover">
<h1>Single</h1>
<p>Branding</p>
</div>
</a>
</li>

<li class="grid-item">
<img src="img/portfolio/5.jpg">
<a class="ajax-link" href="single-fullscreen.html">
<div class="grid-hover">
<h1>Full Screen</h1>
<p>Branding</p>
</div>
</a>
</li>

<li class="grid-item">
<img src="img/portfolio/2.jpg">
<a class="ajax-link" href="#">
<div class="grid-hover">
<h1>Single</h1>
<p>Branding</p>
</div>
</a>
</li>

<li class="grid-item">
<img src="img/portfolio/3.jpg">
<a class="ajax-link" href="#">
<div class="grid-hover">
<h1>Single</h1>
<p>Branding</p>
</div>
</a>
</li>

<li class="grid-item">
<img src="img/portfolio/4.jpg">
<a class="ajax-link" href="#">
<div class="grid-hover">
<h1>Single</h1>
<p>Branding</p>
</div>
</a>
</li>

<li class="grid-item">
<img src="img/portfolio/6.jpg">
<a class="ajax-link" href="#">
<div class="grid-hover">
<h1>Single</h1>
<p>Branding</p>
</div>
</a>
</li>

</ul>

</div>


CSS

/*2.2. Portfolio
**********************************************************************/
#ajax-content{width:100%;}

.portfolio-grid{
width:1170px;
position:relative;
margin: 30px auto;
overflow:hidden;
}

#portfolio-sidebar{
width: 780px !important;
padding-right: 390px;

}

li.grid-item{
width:360px;
position:relative;
padding:15px;
display:block;
}

.grid-hover{
position: absolute;
width:360px;
height: 100%;
top:0;
background: white;
z-index: 2;
opacity: 0;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}

.grid-hover:hover{
opacity: 0.9;
}

.grid-hover h1{
font-size:23px;
bottom:80px;
left:40px;
position:absolute;
text-transform:uppercase;
color:#000000;
letter-spacing:1px;
font-weight:900;
line-height:50px;
}

.grid-hover p{
font-size:13px;
bottom:40px;
left:40px;
position:absolute;
color:#686868;
letter-spacing:1px;
font-weight:400;
line-height:50px;
}

li.grid-item img{
width:360px;
}


JSFIDDLE
https://jsfiddle.net/3hwvvbod/

Answer

You have these rules that prevent it from displaying horizontally:

li.grid-item{
  width: 360px;
  padding: 15px;
  display: block; /*key*/
}

Change it to:

li.grid-item{
  display: inline-block;
}

And adjust the width of .portfolio-grid / #portfolio-sidebar will help. Note, the 1nd one will get overridden by the 2nd one for same properties. Because you set it up like this <ul class="portfolio-grid" id="portfolio-sidebar">. I suggest not to use ID selectors for styling.

jsFiddle