We appreciate you taking the time to read this post in advance.
Below is a link to the reproduction:
Purpose: The goal here is to center the div.home-text (blue area) and eliminate the margin-right to prevent visitors from inadvertently scrolling to empty space on the right.
Issue: While this works seamlessly on desktop and larger screens, I couldn't figure out why I am unable to center the page area and remove the margin-right with no value. (Refer to the image below)
https://i.sstatic.net/44rXR.jpg
This issue only occurs on a specific page, Home. I suspect that this might be related to the 'react-pdf' hook I used... but adjusting the margin-left or removing the margin-right with no value did not resolve the problem.
Could it be an incorrect media query setup...? What steps should I take?
// Home.js
import React from "react";
import "./Home.css";
// pdf
import { Document, Page } from "react-pdf/dist/esm/entry.webpack5";
import HomePDF from "../../pdf/resume.pdf";
function Home() {
return (
<>
<div className="home-wrapper">
{/* layer very back */}
<div className="home-content">
<div className="home-text">
{/* profile picture, box */}
<img
className="profile"
src={require("../../images/me-photo.jpg")}
/>
<hr />
{/* pdf */}
<div className="pdf">
<Document file={HomePDF}>
<Page scale={1.5} pageNumber={1} />
{/* <Page size="A4" style={styles.page} /> */}
</Document>
</div>
<hr />
</div>
</div>
</div>
</>
);
}
export default Home;
// Home.css
.home-wrapper {
/* width: 100%;
margin: 0 auto;
height: 100%;
display: block;
text-align: center; */
/* width: 100%;
height: calc(100vh - 100px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center; */
width: 100%;
align-items: center;
}
.home-content {
margin: 0 auto;
width: auto;
height: auto;
display: block;
text-align: center;
}
.profile {
border-radius: 20%;
height: auto;
width: 280px;
/* insurance */
margin-right:auto;
margin-left: auto;
margin-top: 1rem;
margin-bottom: 1rem;
}
.home-text {
width: auto;
height: auto;
margin: 0;
}
.react-pdf__Page__canvas {
margin-right: auto;
margin-left: auto;
margin-top: 1rem;
}
.react-pdf__Page__canvas {
width: 600px;
height: 800px;
}
@media only screen and (max-width: 600px) {
.home-wrapper {
width: 100%;
}
.home-text {
max-width: 400px;
}
.pdf {
max-width: 300px;
}
.react-pdf__Page__canvas {
max-width: 390px;
max-height: 550px;
}
}