CODEWITHSUNDEEP
htmlcss
Bucky Thomas
Bucky Thomas

Reputation: 29

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/

Upvotes: 0

Views: 67

Answers (4)

frnt
frnt

Reputation: 8795

Just add float:left to your li.grid-item. Even display:inline gets you bit same result i.e. aligning wise, but you need to workout on padding while adding inline. 

li.grid-item{
  float:left;
}

(or)

li.grid-item{
display:inline;
}

Upvotes: 0

Stickers
Stickers

Reputation: 78686

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

Upvotes: 1

Tom
Tom

Reputation: 2369

 .portfolio-grid{
 position:relative;
 margin: 30px auto;
 overflow: scroll-y;
 display: inline;
 white-space: nowrap
 }

#portfolio-sidebar{
  width: auto !important;

}

You need to switch the li/images to inline and unset widths on .portfolio-grid class. I added overflow: scroll-y and white-space nowrap to the css class definition as well.

See https://jsfiddle.net/vuqonrdo/

Upvotes: 0

5eeker
5eeker

Reputation: 1027

Try this css : 

li.grid-item{
  width:360px;
  position:relative;
  padding:15px;
  display:inline;
  float:left;

}

Upvotes: 0

Related Questions