I'm currently in the process of developing a responsive photo gallery based on this tutorial. Within my project, there exists a component known as MemoryList which is defined as shown below:
import React from 'react';
import _ from 'lodash';
import {MemoryItem} from "./MemoryItem";
class MemoryList extends React.Component {
renderItems() {
return _.map(this.props.memory, (memory, index) => <MemoryItem key={index} {...memory}
deleteFunc={this.props.deleteFunc}/>)
}
render() {
return (
<div className="image-row">
<div className={'column'}>
{this.renderItems()}
</div>
</div>
)
}
}
export {MemoryList}
In addition to the component, there's also a corresponding CSS file:
.image-row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Establish four equal columns placed alongside each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Responsive design - switches to a two-column layout at 800px width */
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive design - stacks the two columns on top of each other at 600px width */
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
My goal is to have 4 columns of images, with each column being represented by a MemoryList. Each MemoryList receives an array of objects to generate a MemoryItem:
class MemoryItem extends React.Component {
renderAction(){
const profile = JSON.parse(localStorage.getItem('profile'));
const memory_user = this.props.user;
if (profile.username === memory_user){
return (
<button name={this.props.id} className={'btn btn-primary'} onClick={this.props.deleteFunc}>Delete</button>
)
}
}
render(){
return (
<img name={this.props.id} className={"img-thumbnail"} src={this.props.image_url} alt={'N/A'}/>
)
}
}
However, the MemoryLists are not positioning themselves adjacent to one another, but rather are aligning vertically. Any suggestions on what might be causing this issue?