CODEWITHSUNDEEP
htmlcssprinting
Shamoon
Shamoon

Reputation: 43639

CSS Print and @page are not working

I have a simple HTML page and on that, I have

body, html {
  width: 100%;
  margin: 0;
  padding: 0;
}

@media print {
  @page {
    size: letter portrait;
    padding-left: 5in;
    padding-right: 0.25in;
    padding-top: 1in;
  }
}

However, when I print preview in Chrome, it appears completely unaffected. What do I have to do to get Chrome to recognize the @page and the media query?

Upvotes: 1

Views: 6757

Answers (1)

user2182349
user2182349

Reputation: 9782

I don't think you need the media query because @page is only for print.

Also, according to: https://developer.mozilla.org/en-US/docs/Web/CSS/@page

You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.

Maybe using margins instead of padding would work.

Upvotes: 4

Related Questions