The image spills over with abundance

I'm currently working on creating a movie watchlist interface, but I'm facing challenges with maintaining the design consistency. I am utilizing the tmdb API to retrieve movie information. My goal is to have each section resemble the first one (Halo), however, in the other two sections, the images are overflowing and disrupting the layout. Your assistance would be greatly appreciated.

https://i.sstatic.net/8G2a4.png

React Code Snippet

/* Here is the corresponding style.scss */

@import "../../mixins.scss";
.watchList {
  background-color: var(--black);
  padding-top: 50px;
  margin-bottom: 10px;

  .item {
    margin: 10px auto;
    width: 500px;
    height: 350px;
    border: 2px solid white;

    .itemWrapper {
      position: relative;
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .posterBlock {
        position: relative;
        width: 40%;

        .posterImg {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .textBlock {
        display: flex;
        flex-direction: column;
        margin-left: 15px;
        .title {
          font-size: 2em;
          color: white;
          margin-bottom: 10px;
        }
        ...

Example Rendered Output

:root {
  --black: black;
}

body {
  font-family: sans-serif;
}

.watchList {
     background-color: var(--black);
     padding-top: 50px;
     margin-bottom: 10px;
}
 .watchList .item {
     margin: 10px auto;
     width: 500px;
     height: 350px;
     border: 2px solid white;
}
 .watchList .item .itemWrapper ...

<div class="watchList">
  <div class="ContentWrapper">

    <div class="item">
      <div class="itemWrapper">
        <div class="posterBlock">
          <Img class="posterImg" src=...

javascriptcssreactjs

Answer №1

In my opinion, adjusting the width of the .textblock would be beneficial.

.watchList .item .itemWrapper .textBlock {
     display: flex;
     flex-direction: column;
     margin-left: 15px;
     width: 40%;
}


:root {
  --black: black;
}

body {
  font-family: sans-serif;
}

.watchList {
     background-color: var(--black);
     padding-top: 50px;
     margin-bottom: 10px;
}
 .watchList .item {
     margin: 10px auto;
     width: 500px;
     height: 350px;
     border: 2px solid white;
}
 .watchList .item .itemWrapper {
     position: relative;
     height: 100%;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .watchList .item .itemWrapper .posterBlock {
     position: relative;
     width: 40%;
}
 .watchList .item .itemWrapper .posterBlock .posterImg {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .watchList .item .itemWrapper .textBlock {
     display: flex;
     flex-direction: column;
     width: 40%;
     margin-left: 15px;
}
 .watchList .item .itemWrapper .textBlock .title {
     font-size: 2em;
     color: white;
     margin-bottom: 10px;
}
 .watchList .item .itemWrapper .textBlock .info .text {
     margin-right: 10px;
     opacity: 0.5;
     line-height: 24px;
     color: white;
}
 .watchList .item .itemWrapper .textBlock .info .text.bold {
     font-weight: 600;
     opacity: 1;
}
 .watchList .item .itemWrapper .textBlock .btn {
     background-image: linear-gradient(92.88deg, #455eb5 9.16%, #5643cc 43.89%, #673fd7 64.72%);
     color: white;
     font: var(--black);
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 16px;
     font-weight: 500;
     height: 2rem;
     cursor: pointer;
     border-radius: 8px;
     border-style: none;
     margin-top: 10px;
     padding: 1.3rem;
}
 .watchList .item .itemWrapper .textBlock .btn:hover {
     box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
     transition-duration: 0.1s;
}
<div class="watchList">
  <div class="ContentWrapper">

    <div class="item">
      <div class="itemWrapper">
        <div class="posterBlock">
          <Img class="posterImg" src="https://pad.mymovies.it/filmclub/2024/01/133/locandina.jpg" />
        </div>
        <div class="textBlock">
          <span class="title">Halo</span>
          <div class="info">
            <span class="text bold">Released on:</span>
            <span class="text">Mar 17, 2024</span>
          </div>
          <div class="info">
            <span class="text bold">Type:</span>
            <span class="text">TV series</span>
          </div>
          <div class="info">
            <span class="text bold">Added on: </span>
            <span class="text">Mar 12, 2024</span>
          </div>
          <button class="btn">Remove</button>
        </div>
      </div>
    </div>

    <div class="item">
      <div class="itemWrapper">
        <div class="posterBlock">
          <Img class="posterImg" src="https://www.tres-click.com/wp-content/uploads/2017/04/dasperfektedinner.jpg" />
        </div>
        <div class="textBlock">
          <span class="title">Das perfekte Dinner</span>
          <div class="info">
            <span class="text bold">Released on:</span>
            <span class="text">Mar 17, 2024</span>
          </div>
          <div class="info">
            <span class="text bold">Type:</span>
            <span class="text">TV series</span>
          </div>
          <div class="info">
            <span class="text bold">Added on: </span>
            <span class="text">Mar 12, 2024</span>
          </div>
          <button class="btn">Remove</button>
        </div>
      </div>
    </div>

    <div class="item">
      <div class="itemWrapper">
        <div class="posterBlock">
          <Img class="posterImg" src="https://m.media-amazon.com/images/M/MV5BZThiYTE5YTgtYzJhNy00ZTM2LTgyNTMtOTExZWNlZTBjZWYwXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_.jpg" />
        </div>
        <div class="textBlock">
          <span class="title">Watch What Happens Live with Andy Cohen</span>
          <div class="info">
            <span class="text bold">Released on:</span>
            <span class="text">Mar 17, 2024</span>
          </div>
          <div class="info">
            <span class="text bold">Type:</span>
            <span class="text">TV series</span>
          </div>
          <div class="info">
            <span class="text bold">Added on: </span>
            <span class="text">Mar 12, 2024</span>
          </div>
          <button class="btn">Remove</button>
        </div>
      </div>
    </div>

  </div>
</div>

Answer №2

Issue with Width property in Flexbox!

The width property is not functioning as expected in the .posterBlock class. Try replacing it with the following code snippet:

flex-basis: 200px;
flex-grow: 0;
flex-shrink: 0;


:root {
  --black: black;
}

body {
  font-family: sans-serif;
}

.watchList {
     background-color: var(--black);
     padding-top: 50px;
     margin-bottom: 10px;
}
 .watchList .item {
     margin: 10px auto;
     width: 500px;
     height: 350px;
     border: 2px solid white;
}
 .watchList .item .itemWrapper {
     position: relative;
     height: 100%;
     width: 100%;
     display: flex;
     align-items:center;
}
 .watchList .item .itemWrapper .posterBlock {
     position: relative;
    flex-basis: 40%;
    flex-grow: 0;
    flex-shrink: 0;
}
 .watchList .item .itemWrapper .posterBlock .posterImg {
     width: 100%;
     height: 100%;
     object-fit: cover;
     flex:1;
}
 .watchList .item .itemWrapper .textBlock {
     display: flex;
     flex-direction: column;
     margin-left: 15px;
}
 .watchList .item .itemWrapper .textBlock .title {
     font-size: 2em;
     color: white;
     margin-bottom: 10px;
}
 .watchList .item .itemWrapper .textBlock .info .text {
     margin-right: 10px;
     opacity: 0.5;
     line-height: 24px;
     color: white;
}
 .watchList .item .itemWrapper .textBlock .info .text.bold {
     font-weight: 600;
     opacity: 1;
}
 .watchList .item .itemWrapper .textBlock .btn {
     background-image: linear-gradient(92.88deg, #455eb5 9.16%, #5643cc 43.89%, #673fd7 64.72%);
     color: white;
     font: var(--black);
     displ
<div class="watchList">
  <div class="ContentWrapper">

    <div class="item">
      <div class="itemWrapper">
        <div class="posterBlock">
          <Img class="posterImg" src="https://pad.mymovies.it/filmclub/2024/01/133/locandina.jpg" />
        </div>
        <div class="textBlock">
          <span class="title">Halo</span>
          <div class="info">
            <span class="text bold">Released on:</span>
            <span class="text">Mar 17, 2024</span>
          </div>
          <div class="info">
            <span class="text bold">Type:</span>
            <span class="text">TV series</span>
          </div>
          <div class="info">
            <span class="text bold">Added on: </span>
            <span class="text">Mar 12, 2024</span>
          </div>
          <button class="btn">Remove</button>
        </div>
      </div>
    </div>

    <div class="item">
      <div class="itemWrapper">
        <div class="posterBlock">
          <Img class="posterImg" src="https://www.tres-click.com/wp-content/uploads/2017/04/dasperfektedinner.jpg" />
        </div>
        <div class="textBlock">
          <span class="title">Das perfekte Dinner</span>
          <div class="info">
            <span class="text bold">Released on:</span>
            <span class="text">Mar 17, 2024</span>
          </div>
          <div class="info">
            <span class="text bold">Type:</span>
            <span class="text">TV series</span>
          </div>
          <div class="info">
            <span class="text bold">Added on: </span>
            <span class="text">Mar 12, 2024</span>
          </div>
          <button class="btn">Remove</button>
        </div>
      </div>
    </div>

    <div class="item">
      <div class="itemWrapper">
        <div class="posterBlock">
          <Img class="posterImg" src="https://m.media-amazon.com/images/M/MV5BZThiYTE5YTgtYzJhNy00ZTM2LTgyNTMtOTExZWNlZTBjZWYwXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_.jpg" />
        </div>
        <div class="textBlock">
          <span class="title">Watch What Happens Live with Andy Cohen</span>
          <div class="info">
            <span class="text bold">Released on:</span>
            <span class="text">Mar 17, 2024</span>
          </div>
          <div class="info">
            <span class="text bold">Type:</span>
            <span class="text">TV series</span>
          </div>
          <div class="info">
            <span class="text bold">Added on: </span>
            <span class="text">Mar 12, 2024</span>
          </div>
          <button class="btn">Remove</button>
        </div>
      </div>
    </div>

  </div>
</div>

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

Stop files from being downloaded every time the page is visited

Within my Vue.js application, there is an animation that appears on a specific page. However, each time I visit that page, the assets for the animation are re-downloaded from scratch. Although the app does get destroyed when leaving the page, using v-show ...

javascriptvue.js

Creating a unique navigation bar for a specific component within React Router

I am facing a challenge in creating a separate navigation bar for one of the components. I attempted to place it outside the Switch element but encountered difficulties. Any suggestions on how to approach this? Below is the code snippet: import React, { ...

reactjsreact-router

I'm having an issue where the height of my website is not being set to 100% in React + MUI. This is causing the website to appear shrunk. Can anyone guide me

https://i.stack.imgur.com/wlbf6.png Observing how the App bar resized the webpage's side, it becomes evident that the Root component remains at full 100% height. The specific App Bar component used is 'App Bar with a primary search field' f ...

reactjsmaterial-ui

Error: Your Discord bot is unable to send a message as it is empty. Please check Discord

I have been developing a Discord Bot to verify Roblox accounts. Although my script is prepared and the command "-verify" can be executed, an error arises: (node:22872) DeprecationWarning: The message event is deprecated. Use messageCreate instead (Use `n ...

javascriptnode.jsdiscorddiscord.js

Maintaining the original layout upon refreshing the page

Incorporating two forms on my website, I added a button that transitions between the login and sign-up forms smoothly. The process is as follows: Initially, the login form is displayed; clicking the button switches to the sign-up form. Proceeding to subm ...

javascriptjqueryhtmlcss

Resolved navigation bar problems

As a beginner in web development, I am working hard to launch my first website. Today, I have a question for the stack overflow community regarding a fixed navbar issue. The navbar I have created is functioning properly on Chrome, but when it comes to Fire ...

phphtmlcssnavbarfixed

Quantifying website loading times using JavaScript code

Looking for a solution to load a webpage, analyze page load time and network call statistics using tools like Selenium. I'm interested in obtaining similar information as Chrome DevTools Network tab, including details on request status, type, size, an ...

javascriptseleniumgoogle-chrome-devtoolspageloadlighthouse

Is anyone else experiencing issues with the Express middleware that checks for IDs? Looking for suggestions on how to fix

Currently working on a project with Node js utilizing Express and MongoDb for the backend. In this project, USERS have the ability to post COMMENTS, so I have created a middleware to access the DELETE route and check if the USER ID matches the ID of the in ...

javascriptnode.jsexpress

The behavior of having two submit buttons within the $document.ready(function) in Jquery

In my code, I have implemented the behavior of two buttons, button1 and button2, within a $(document).ready(function). Whenever either button is clicked, an alert() function should be triggered. However, it seems that only button2 is functioning properly w ...

javascriptjquerysubmit-button

How to use jQuery to delete the final table in an entire HTML document

This situation is really frustrating: When I make a jQuery Ajax call, the success callback returns an entire HTML page. The returned page looks like this: <html> <head> <title>Title</title> <body> <table></table> ...

javascriptjqueryajax

Concerning the issue of components not loading correctly when using Angular with Lazy Loading Routing

Encountering an unusual issue while utilizing lazyload routing in our application! Within AppModule, there is TopModule followed by DashboardModule, all being loaded lazily. When localhost:4200/dashboard is accessed, the loading sequence is AppModule, To ...

javascriptangular

Display a collection of objects by combining them with a single string

I am encountering an array of objects like this: const array = [<Button>abc</Button>, <Button>def</Button>] When I render them using: return array I end up with a row of buttons displayed next to each other. It looks somewhat lik ...

javascriptreactjs

loading a module's dependencies seamlessly with RequireJS

Currently, I am working with Knockout and Require in my project. I have isolated some Knockout handlers into a separate module that I want to utilize. While there is no specific JavaScript code relying on this module, it is referenced in the data-bind attr ...

javascriptknockout.jsrequirejs

Bind AngularJS data to select elements

I am encountering an issue with data binding on a select tag, despite following the guidelines in the documentation. Here is my select element: <select id="start-type" ng-model="startType"> <option value="day-of-week">Day of the week</op ...

javascriptangularjs

When utilizing react-query to submit data, clicking a button will result in receiving an undefined value

My goal is to capture a user's input and forward it to another page upon clicking a button and submitting the form data, all while utilizing react-query. The form on the page consists of three inputs: username, email, and password. I intend to submit ...

reactjsnext.jsreact-query

Prevent specific fields from being saved in Node MongoDB native

When working with MongoDB and using the node mongodb native driver to insert documents, I have encountered an issue. The objects I am inserting have fields that I do not want to be saved in the database: var x = { field: 'value', _nonPersist ...

javascriptnode.jsmongodb

Tips for showcasing an image on an HTML page

I am encountering an issue with my HTML page that includes a Button. When clicked, it is supposed to display an image using an Ajax call. The functionality works properly in Postman Rest Client. However, when accessed through a browser, it only shows raw ...

javascriptjqueryhtmlajaximage

Implementing multiple content changes in a span using javascript

Having an issue with a pause button where the icon should change on click between play and pause icons. Initially, the first click successfully changes the icon from a play arrow to a pause icon, but it only changes once. It seems like the else part of the ...

javascripthtml

What is the Ideal Placement for the MuiThemeProvider Component?

Greetings! I am in the process of developing a new React application and I have chosen Material Ui as my preferred CSS library. I am facing some challenges in integrating it smoothly with react-router. Specifically, I am confused about where to place the M ...

javascriptreactjsmaterial-ui

Encountering an error with MaterialUI (MUI) after setting up webpack server, as getUtilityClass function is not recognized

My project encountered an error upon startup, displaying a Browser Runtime Error after I added webpack to the configuration. Here is a snippet of the webpack config file I used: const webpack = require('webpack'); const path = require('path& ...

reactjstypescriptwebpackmaterial-uipatch-package