I've encountered an issue where I can't seem to add margin to the row of images. The margin appears fine without any CSS when viewed on a wide screen, but once I scale it down to mobile view, the margin disappears completely. Even after attempting to add a 10px margin via CSS, there is no change in the layout.
As someone who isn't proficient in CSS, I could really use some guidance.
CSS :
.row__posters {
display: flex;
overflow-x: scroll;
overflow-y: hidden;
}
.row__poster {
transition: transform 300ms;
/* preserves the aspect ratio */
object-fit: contain;
width: 100%;
max-height: 100px;
margin-right: 10px;
}
.row__poster:hover {
transform: scale(1.1);
z-index: 1;
}
React JSX :
import '../styles/Row.css';
const Row = ({ title, movies }) => {
const posterUrl = "https://image.tmdb.org/t/p/w500/";
const renderedRow = movies.map(movie => {
return (
<img
className="row__poster"
src={`${posterUrl}${movie.poster_path}`}
alt={movie.title}
key={movie.id} />
);
});
return (
<div className="row">
<h1>{title}</h1>
<div className="row__posters">
{renderedRow}
</div>
</div>
);
};
export default Row;
This is how it looks on narrow width :
https://i.sstatic.net/OhzC9.png
NOTE: Using NextJS in React.