CODEWITHSUNDEEP
cssreactjsreact-to-print
user19913971
user19913971

Reputation: 19

Optimizing react-to-print for all/most browsers and mobile devices

I'm working on a sample react-to-print resume template for a larger portfolio website. I optimized this page using Chrome and Edge on a laptop, however when the print button is clicked using Firefox, the background color in the .name-contact class is white and the page spills over to the next page. Ideally I would like the resume template to fit onto one page like it does with Edge and Chrome.

Also for mobile browsers, the print preview is not at all like it is on a laptop. I'm trying to make the print preview uniform throughout all browsers and all devices.

I'm not sure if this is a CSS or a react-to-print issue.

I have the resume template hosted with GitHub pages: spencertimothy.github.io/React-to-print-example

Here is the CSS 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 from print preview with Firefox: Firefox laptop print preview

Here is a screenshot form print preview from a mobile device with Safari: Safari mobile device print preview

Here is a screenshot from print preview from a mobile device with Firefox and DuckDuckGo: DuckDuckGo and Firefox mobile device print preview

Upvotes: 1

Views: 1730

Answers (1)

Pallamolla Sai
Pallamolla Sai

Reputation: 2493

You can use like below to get the background styles while printing in firefox & IE. For me it is fitting into one page while printing.

@media print {
 .my-resume {
    -webkit-print-color-adjust: exact; /* chrome */
    color-adjust: exact; /* firefox and IE */
  } 
}

https://i.sstatic.net/oN7pl.jpg

Upvotes: 0

Related Questions