I'm encountering an issue with deploying my create-react-app on github pages.
The first image showcases my deployed app on github pages, but the image is not properly centered on the page as intended.
https://i.stack.imgur.com/rOciT.jpg
On the other hand, the second picture demonstrates the appearance of the app when running on my localhost using npm start.
https://i.stack.imgur.com/7w8Hh.jpg
If anyone could assist me in resolving the issue and help center the image on deployment, I would greatly appreciate it. Here's the relevant code:
In my About.js:
import React from 'react';
import me from '../../photos/portraits/portraits8.jpg';
import './About.css';
const About = () => {
return(
<div>
<figure className="figure center">
<img src={me} alt="" className="about-img"/>
<figcaption className="figcaption bg-color">Hi, my name is Thomas Nguyen, and I’m a freelance photographer based in Morgan Hill, CA. My main focus is automotive photography as well as portrait photography. I'm also a Software Engineer, and this whole website was built with React, Javascript, CSS, and HTML!</figcaption>
</figure>
</div>
);
}
export default About;
In my About.css:
.about-img{
/*max-height: 500px;*/
max-height: 400px;
height: auto\9;
width: auto;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.figure {
display: table;
margin: 0;
}
.figcaption {
display: table-caption;
caption-side: bottom;
padding: 10px;
}
.bg-color{
background-color: rgba(78, 100, 124, .1);
}