CODEWITHSUNDEEP
htmlcss
user6209464
user6209464

Reputation:

Proper aligning li elements

I'm trying to put each li element in its own row. Each li element contains a img on left-hand and some text as a description. One more requirement, everything should be responsive. Right now, written code is responsive enough but it does not put each li element separately. Here's code:

.portfolio-images {
  margin: auto auto auto 30px;
}
.portfolio-image {
  float: left;
  margin: auto 10px 10px 5px;
}
#portfolio-images ul {
  list-style: none;
}
.portfolio-images li {
  display: block;
}
<div class="container-fluid" id="portfolio-images">
  <ul>
    <li>
      <img class="portfolio-image img-responsive" src="http://i64.tinypic.com/2ltg2h4.jpg">
      <h3>kitty</h3>
      <p>ipsum kitty itsum sit on the fur watching the grass. grass shine in sun burning bright light on the buildings. fan schemrring in the light. house painted yellow, black and red.</p>
    </li>
    <li>
      <img src="http://i64.tinypic.com/2ltg2h4.jpg" alt="devops" class="portfolio-image img-responsive">
      <h3>kitty</h3>
      <p>ipsum kitty itsum sit on the fur watching the grass. grass shine in sun burning bright light on the buildings. fan schemrring in the light. house painted yellow, black and red.</p>
    </li>
    <li>
      <img src="http://i64.tinypic.com/2ltg2h4.jpg" alt="devops" class="portfolio-image img-responsive">
      <h3>kitty</h3>
      <p>ipsum kitty itsum sit on the fur watching the grass. grass shine in sun burning bright light on the buildings. fan schemrring in the light. house painted yellow, black and red.</p>
    </li>    
    
  </ul>
</div>

Please help with this.

Upvotes: 0

Views: 26

Answers (1)

Ori Drori
Ori Drori

Reputation: 191976

You haven't cleared the float of .portfolio-images. There are many ways to do so, in this case I've used overflow: auto on the .item class, which I've applied to all li tags:

.item {
  overflow: auto;
}
.portfolio-images {
  margin: auto auto auto 30px;
}
.portfolio-image {
  float: left;
  margin: auto 10px 10px 5px;
}
#portfolio-images ul {
  list-style: none;
}
.portfolio-images li {
  display: block;
}
<div class="container-fluid" id="portfolio-images">
  <ul>
    <li class="item">
      <img class="portfolio-image img-responsive" src="http://i64.tinypic.com/2ltg2h4.jpg">
      <h3>kitty</h3>
      <p>ipsum kitty itsum sit on the fur watching the grass. grass shine in sun burning bright light on the buildings. fan schemrring in the light. house painted yellow, black and red.</p>
    </li>
    <li class="item">
      <img src="http://i64.tinypic.com/2ltg2h4.jpg" alt="devops" class="portfolio-image img-responsive">
      <h3>kitty</h3>
      <p>ipsum kitty itsum sit on the fur watching the grass. grass shine in sun burning bright light on the buildings. fan schemrring in the light. house painted yellow, black and red.</p>
    </li>
    <li class="item">
      <img src="http://i64.tinypic.com/2ltg2h4.jpg" alt="devops" class="portfolio-image img-responsive">
      <h3>kitty</h3>
      <p>ipsum kitty itsum sit on the fur watching the grass. grass shine in sun burning bright light on the buildings. fan schemrring in the light. house painted yellow, black and red.</p>
    </li>    
    
  </ul>
</div>

Upvotes: 1

Related Questions