I am attempting to adjust the @page rule size based on matching classnames, however, my research has only led me to pseudo-classes which do not seem to solve my issue.
Here is a snippet of my CSS:
@media print {
@page {
margin: 13.2mm 0mm 12.9mm;
}
}
HTML file #1
<div class='classname-1'>
Insert content here...
</div>
HTML file #2
<div class='classname-2'>
Insert content here...
</div>
The solution I devised does not seem to work correctly when printing, as it only applies the most recent @page rule:
@media print {
.classname-1 {
@page {
size: portrait;
margin: 13.2mm 0mm 12.9mm;
}
}
.classname-2 {
@page {
size: landscape;
margin: 5mm 5mm 5mm;
}
}
}