I'm currently in the process of creating a portfolio website using React Bootstrapping. I'm encountering an issue where the card components I'm using to display images appear vertically instead of horizontally. I've attempted to troubleshoot by adjusting the CSS within the Card.js file, but haven't seen any changes reflected. Below is the code I'm working with.
index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
.g-card {
margin: 20px;
}
.g-card-image {
border-radius: 10px;
width: 300px;
height: 480px;
box-shadow: 0px 0px 3px 1px #ccc;
}
.g-card-info {
margin-top: 10px;
min-height: 100px;
}
.g-card-title {
font-size: 24px;
margin: 0px;
}
.g-card-sub-title {
font-size: 16px;
margin: 0px;
}
Card.js
import React from 'react';
import CardInfo from './Cardinfo';
function Card(props) {
return (
<div className="d-inline-block g-card" >
<img className="g-card-image" src={props.item.imgSrc} alt={props.item.imgSrc} />
{ props.item.selected && <CardInfo title={props.item.title} subTitle={props.item.subTitle} link={props.item.link} /> }
</div>
)
}
export default Card;
Carousel.js
import React from 'react';
import Card from './Card';
import EricDP from '../assets/images/EricDP.jpg';
import Github from '../assets/images/Github.png';
import Trailhead from '../assets/images/Trailhead.png';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
class Carousel extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [
{
id: 0,
title: 'LinkedIn',
subTitle: 'Check out my LinkedIn!',
imgSrc: EricDP,
link: '',
selected: false
},
{
id: 1,
title: 'Github',
subTitle: 'See my projects on Github, including this site!',
imgSrc: Github,
link: '',
selected: false
},
{
id: 2,
title: 'Trailhead',
subTitle: 'See my Trailhead profile and salesforce skills.',
imgSrc: Trailhead,
link: '',
selected: false
}
]
}
}
handleCardClick = (id, card) => {
let items = [...this.state.items];
items[id].selected = items[id].selected ? false : true;
items.forEach(item => {
if (item.id !== id) {
item.selected = false;
}
});
this.setState({
items
});
}
makeItems = (items) => {
return items.map(item => {
return <Card item={item} onClick={(e => this.handleCardClick(item.id, e))} key={item.id} />
})
}
render() {
return (
<Container fluid={true}>
<Row className="justify-content-around">
{this.makeItems(this.state.items)}
</Row>
</Container>
)
}
}
export default Carousel;