I’m pretty new to UI programming and need some help with the layout of the mobiscroll grid layout.
I’m attempting to use the grid layout to show a grid of video’s. This was good with one Card component. Once I start adding even one more Card component to the Grid, the card itself narrowed significantly (see image uploaded)
Below is the following code I’m using
class VideoCard extends React.Component {
render() {
return (
<div className="mbsc-col-12 mbsc-col-sm-6 mbsc-col-lg-4 mbsc-col-xl-3">
<mobiscroll.Card>
<TwitchPlayer
channel={this.props.channel}
id={this.props.channel}
theme="dark"
withChat={false}
allowFullScreen={false}
width="100%"
hideControls={true}
muted
onVideoPause={() => console.log(':(')}
/>
<mobiscroll.CardContent>
<div className="mbsc-card-title">{this.props.channel}</div>
<p className="mbsc-txt-muted">{this.props.game}</p>
</mobiscroll.CardContent>
</mobiscroll.Card>
</div>
);
}
}
return (
<div className="mbsc-padding">
<h3>Live Streams</h3>
<div className="mbsc-grid">
<div className="mbsc-row mbsc-justify-content-center mbsc-no-padding">
{streams.streams.map(function(app) {
return <VideoCard channel={app.channel} game={app.game}/>//<CardItem app={app} key={app.id} />;
})}
</div>
</div>
</div>
)
