I created a React component to display a series of div elements on a page using the Foundation Block Grid system to control the number of divs per row. However, I am facing an issue where the number of divs does not change when switching to a small-sized screen, even though it changes from 6 to 4 when switching from large to medium screens.
Can anyone advise why the 'small-up-1' class is not taking effect on a small screen?
Thank you.
const MovieList = ({movies}) => {
if (movies.length === 0) {
return <p>We Could Not Find Anything</p>;
}
movies = movies.map((movie) => {
let className = "column column-block movie-box";
let image;
if (movie.poster_path) {
image = <img src={`http://image.tmdb.org/t/p/w185/${movie.poster_path}`} />;
} else {
image = <img src={`http://www.planetvlog.com/wp-content/themes/betube/assets/images/watchmovies.png`} />;
}
return(
<div key={movie.id} className={className}>
<p>{movie.title}</p>
{image}
</div>
);
});
return (
<div className='row small-up-1 medium-up-4 large-up-6'>
{movies}
</div>
);
};