Ionic Grid - remove margin for printing?


I’ve creating an online form and setting a 20% margin on the left and right side of the page so the form is centered. There are up to 4 columns used inside this space in the middle of the page. This form will be printed sometimes so I need to be able to remove the margin otherwise everything is printed in the middle 60% of an 8-1/2" sheet of paper - far too narrow.

Here’s the body:
<div class="list" style="margin-left:20%; margin-right:20%"> <div class="row responsive-sm" > <div class="col col-50"> <label class="item item-input item-stacked-label"> <span class="input-label">Name</span> <input type="text" placeholder="Linus"> </label> </div> <div class="col col-50"> <label class="item item-input item-stacked-label"> <span class="input-label">Company</span> <input type="text" placeholder="ACME"> </label> </div> </div> <div class="row responsive-sm"> <div class="col col-100"> <label class="item item-input item-stacked-label"> <span class="input-label">Project Name</span> <input type="text" placeholder="This Project"> </label>

Here’s the attempt I made at using @media print:
`@media print {
@page {
margin-left: 0cm !important;
margin-right: 0cm !important;
margin-top: 0.75in;
margin-bottom: 0.75in;
list {
margin-left: 0%;
margin-right: 0%;


I have also tried modifying the div class=“list” to read div class=“list printMargin” and used that in the css - no luck there either.

Any ideas? This all worked in bootstrap, but it’s not working in ionic.