Hey there! I'm currently in the process of building a Netflix clone, and everything seems to be working well except for one issue with the layout. No matter how I adjust the width of the div containing the images, they just won't change size. I've checked the console and can't seem to find any rule that might be causing this problem. I've tried setting the images to 100% width of their parent container, but that just makes them appear tiny.
CSS has always been a bit tricky for me because it doesn't provide immediate feedback like a console would. If anyone could take a look at the code below and help me understand what's going wrong, I'd really appreciate it. (Also, does anyone know how long it takes to stop feeling clueless when working with CSS?)
I've included the relevant code snippet below. The row__imgLarge class is specifically applied to a single row, which is experiencing the same sizing issue as the rest.
<div className="row__images">
{movies.map((movie) => (
<div
className={`row__imgContainer ${
isLargeRow ? "row__imgLarge" : ""
}`}
key={movie.id}
onClick={() => handleClick(movie)}
>
<img
className="row__image"
src={`${base_url}/${
isLargeRow || !movie.backdrop_path
? movie.poster_path
: movie.backdrop_path
}`}
alt={movie?.title || movie?.name || movie?.original_name}
/>
</div>
))}
.row__images {
display: flex;
overflow-y: hidden;
overflow-x: scroll;
padding: 20px;
}
.row__imgContainer {
/* width: 15.8vw; */
max-height: 40vh;
width: 150vw;
margin-right: 0.6vw;
}
.row__image {
width: 100%;
transition: transfrom 440ms;
}
.row__imgLarge {
max-height: 40vh;
}