CODEWITHSUNDEEP
htmlcssangular
Humble Dolt
Humble Dolt

Reputation: 970

How to place one more image in the first row at that empty space?

enter image description hereI want to place one more image in the first row at that empty space. the left side button(out now) may or may not override the image I am using bootstrap grid layout. col-sm-2 made 6 equal columns but I need to place one button too. For that, I have used bootstrap button and decreased it's width so that I can empty some space for the sixth image.

.list-group {
    width: 100%;
}
.list-group-item-action {
    color: black;
    background: white;
}
.list-group-item-action:hover {
    background: #3d6277;
    color: white;
}
.container-fluid {
    width: 100%;
}
.search {
    width: 300px;
}
.img-fluid {
    margin: 0 auto;
}
h2 span {

	color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 

}
h2{
   color: white;
   position: absolute; 
   top: 0px; 
   left: 50px; 
   width: 100%; 	
}
.btn {
  width:0px;
  padding:10px;
}

h6{
  font-size:22px;
  text-align: center;

}

.btn btn-primary btn-sm{
  background-color: #8064A2 !important;
}

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}
/*
h2 span.spacer {
   padding:0 5px;
}*/


.font-size{
	font-size:10px;
  font-weight:20px;
}
.vertical{
  text-align: horizontal;
  -webkit-transform: rotate(-90deg);  /* Chrome, Safari 3.1+ */
     -moz-transform: rotate(-90deg);  /* Firefox 3.5-15 */
      -ms-transform: rotate(-90deg);  /* IE 9 */
       -o-transform: rotate(-90deg);  /* Opera 10.50-12.00 */
          transform: rotate(-90deg);
}
<div class="container-fluid">
 <div class="search">
<input type="text" class="form-control" name="search box" placeholder= "search..." [(ngModel)]="movieName">	
</div>
<br>
<div class="row">
<button type="button" class="btn btn-info btn-sm"><h6 class="vertical">Out Now</h6></button>
 <div class="list-group col-sm-2" *ngFor="let movie of movies|search:movieName;">
    <button type="button" (click)="detail(movie.id)" class="list-group-item list-group-item-action" >
    <div class="image">
<img src={{movie.img}} class="img-fluid" width="250px" height="250px" />
<h2><span class='spacer'>{{movie.name}}</span> </h2>
<span class="font-size">{{movie.genres}}</span>

</div>
</button>
 </div>
</div>
</div>

Upvotes: 0

Views: 72

Answers (3)

Mhd
Mhd

Reputation: 811

This link might help you. There is another way to do this 

<img style='height: 100%; width: 100%; object-fit: contain'/>

Upvotes: 0

Florin Pop
Florin Pop

Reputation: 5135

You should decrease the width of the images and make them be equal.

As you have 6 images per row, you could set their width as:

img { /* set them a class or be more specific */
  width: calc(100% / 6);
}

EDIT: As discussed in the comments, the OP had issue because of a button placed on the same row which pushed the image to the next row.

The solution: Position the button absolute and put an z-index property so it will be visible.

Upvotes: 1

Agni Kai
Agni Kai

Reputation: 1

You can apply margin-right: 0; to your :nth-child(6) movie item.

Upvotes: 0

Related Questions