Currently, I am developing a sample react-to-print resume template to be included in a larger portfolio website. While testing the page on Chrome and Edge browsers on a laptop, everything seems optimized. However, there are issues when using Firefox; the background color in the .name-contact class turns white, causing the content to overflow onto the next page upon clicking the print button. My goal is to ensure that the resume template fits neatly on one page across all browsers.
In addition, the print preview appears differently on mobile browsers compared to laptops. I aim to achieve consistency in the print preview across all browsers and devices.
I am unsure whether this challenge stems from a CSS or a react-to-print-related problem.
You can find the hosted resume template on GitHub pages here: spencertimothy.github.io/React-to-print-example
Below is the CSS code for the @media print query:
@page {
margin: 0;
padding: 0;
}
button {
display: none;
}
.my-resume {
width: auto;
/* max-width: 100%; */
color: black;
margin: .5cm;
font-size: 10pt;
background-color: white;
box-shadow: none;
border-radius: none;
}
h4,
.education>h2,
.projects>h2,
.relavent-skills>h2,
.work-experience>h2,
b {
color: black
}
h1 {
font-size: 36pt;
}
.name-contact {
background-color: var(--color-light-grey);
border-top: 5px solid var(--color-light-blue);
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.resume-icons,
.map-icon {
color: var(--color-button-blue);
}
li>b {
color: black;
}
}Here is a screenshot of the print preview issue on Firefox from a laptop: Firefox laptop print preview
Here is a screenshot of the print preview issue on Safari from a mobile device: Safari mobile device print preview
The following image shows the print preview issue on DuckDuckGo and Firefox browser on a mobile device: DuckDuckGo and Firefox mobile device print preview