What is the best way to add an additional image to the first row in that vacant spot?

https://i.sstatic.net/7ODvY.pngI need to add an additional image in the top row, but there is currently empty space due to the left button (out now) potentially overlapping the image. This layout is using the bootstrap grid system with columns set to col-sm-2 to create six equal columns. To accommodate the button, I have adjusted its width to create room 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>

Answer №1

To create a more cohesive look, consider reducing the width of the images and ensuring they are all the same size.

Since there are 6 images in each row, you can adjust their width with the following CSS:

img { /* apply a specific class or selector */
  width: calc(100% / 6);
}

UPDATE: In response to feedback, the issue was identified as a button on the same row causing alignment problems.

The solution: Position the button with absolute positioning and set a z-index value to ensure visibility.

Answer №2

To add spacing to the sixth movie item, you should use the CSS rule margin-right: 0; on it.

Answer №3

Check out this helpful link for more information on the topic. Here is an alternative method to achieve the same result:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to integrate VLC media player into an HTML webpage

I'm currently struggling to incorporate a VLC player into a website. What is the most effective method to achieve this task? I need to stream a video file using VLC and display it on the webpage for other users who are logged into my site to view. I&a ...

Activating a certain class to prompt a drop-down action

My PHP code is displaying data from my database, but there's a bug where both dropdown menus appear when I click the gear icon. I want only one dropdown to appear when clicking the gear of a specific project. Can you help me fix this issue? It's ...

Is this Firebase regulation accurate and suitable for PUT and GET requests in an Angular and Firebase environment?

Creating a system where users can only see their own posts and no one else can access them is my main goal. Authentication along with posting functionality is already in place and working, but I want to implement this without using Firebase restrictions. ...

What are the essential Bootstrap CSS and JavaScript files that need to be connected to our HTML document?

I recently downloaded the most recent version of Bootstrap, which is version 4. Upon extraction, I noticed that it includes two folders: one for CSS and the other for JS. The CSS folder consists of approximately 12 CSS files, while the JS folder contains ...

What is the best way to switch between different styles for each paragraph using CSS?

I attempted to use the :nth-of-type selector, but I am uncertain if it is feasible or if it accomplishes what I desire. My goal is to create an alternating style: two paragraphs aligned on the left, followed by two on the right, and so forth, regardless of ...

A guide on increasing the NPM semantic version and generating a tag through the utilization of Pull Request Labels within a GitHub Actions workflow

My GitHub Actions workflow triggers whenever a pull request is created into the develop branch. The main purpose of this workflow is to automatically increase the npm version of my Angular project and create a corresponding tag. Even though the workflow jo ...

What is an html5 tooltip widget?

I stumbled upon a helpful tutorial on html5canvastutorials.com that caught my eye: let triangle = new Kinetic.Shape(function(){ let ctx = this.getContext(); ctx.beginPath(); ctx.lineWidth = 4; ...

Using an image as the background for a three.js scene may cause it to appear distorted

I am struggling with setting an image as a background for my scene without it becoming blurry. I have attempted to use the following code: textureLoader.load("images/background/space.png", function(t) { scene.background = t; }); The problem arises when ...

Having trouble getting the on:dblclick event to trigger on a row within a list using S

I am currently using Sveltestrap and I am in need of a double click handler for a row: <ListGroupItem on:dblclick={handler(params)}> <Row> <Col><Icon name=........</Col> ... </Row> </ListGroupItem> Int ...

Navigating Through the Angular Migration Journey

As I was researching how to integrate ES2020 with Angular, I came across the following useful link: https://angular.io/guide/migration-update-module-and-target-compiler-options The document begins by stating "This migration adjusts the target and module s ...

Discovering nested elements in Python through Selenium

Looking to create a function that can extract elements from any level of nesting in HTML that contain the word 'products' in their text, regardless of case sensitivity. Below is the function in question: def __find_elements(driver): return d ...

Unlocking 'this' Within a Promise

I seem to have an issue with the 'this' reference in the typescript function provided. It is not correctly resolving to the instance of EmailValidator as expected. How can I fix this so that it points to the correct instance of EmailVaildator, al ...

Choosing multiple images by clicking on their alternative text with jQuery

I am currently working on a project that involves clicking on a thumbnail to enlarge the image and display its name (alt) below it. I have made progress, but there seems to be an issue where only one image is displayed no matter which thumbnail I click on. ...

Angular6 Error: Property 'catch' is missing

I am new to Angular and have a basic understanding of it. I am interested in learning how to use HttpClient to create a JSON file instead of relying on a real server. I have set up a service and imported HttpClient: service.ts import { Injectable } from ...

Tips and techniques for performing Ahead-Of-Time (AOT) compilation using Angular-CLI in your

Currently working on an Angular4 project and exploring the necessity of using AOT with Angular-CLI. Since Angular-CLI operates Webpack2 in the backend and webpack can generate production builds using ng build, is it required to also use AOT with CLI? Furt ...

Booking form pop-up appearing beneath the section

Currently, I am in the process of adding a booking form to the main page of . However, I seem to be encountering an issue where a popup appears below the section it is supposed to open within when selecting the number of persons. Despite adjusting the z ...

Output MySQL information into an HTML form with radio buttons and an additional text field

Users are able to input product data into a MySQL database through my web form. They can choose between three main suppliers using radio buttons (Sigma-Aldrich, VWR, and Filter-Service), or select 'other' and specify a different supplier in a tex ...

Is there a way to create a duplicate form without any pre-filled text when clicking the "next" button using JavaScript?

This form contains the details that I would like to display on the page again when clicking the "Add Another Module" button. <div> <form class="in-line" id="module_info"></form> <div style="display: flex;"> < ...

The printing function for the window system can cause disruptions to the layout of the table

After creating a page with a simple table that can be filled in and printed, I noticed some issues with the table formatting after printing. The intended table design was supposed to look like this: https://i.stack.imgur.com/aAk89.png However, upon print ...

Exploring the options: choosing an element from a dropdown menu using a div tag

Struggling to choose an option from a drop-down that contains a div tag instead of the usual select tag. While my code successfully opens the corresponding div, it fails to select the desired element. Here is the snippet of HTML tags: <div id="selecta ...