@media print issues with XS & SM screen sizes

Question

So I am having an issue whenever the page is in XS or SM size.

I have a print style that I apply to my pages for printing and I added this bit of code inside @media print {}

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
     float: left!important;
}
.col-sm-12 {
     width: 100%;
}
.col-sm-11 {
     width: 91.66666667%;
}
.col-sm-10 {
     width: 83.33333333%;
}
.col-sm-9 {
     width: 75%;
}
.col-sm-8 {
     width: 66.66666667%;
}
.col-sm-7 {
     width: 58.33333333%;
}
.col-sm-6 {
     width: 50%;
}
.col-sm-5 {
     width: 41.66666667%;
}
.col-sm-4 {
     width: 33.33333333%;
}
.col-sm-3 {
     width: 25%;
}
.col-sm-2 {
     width: 16.66666667%;
}
.col-sm-1 {
     width: 8.33333333%;
}

Whenever I print in MD or above, everything looks fine but as soon as I hit SM and below, everything zooms out to the top left corner of the page. It looks something like this:

Anyway I can fix this so that it is always printing in MD form regardless of the screen size?

Answer 1

try the @page

The @page CSS at-rule is used to modify some CSS properties when printing a document.

@page{
margin:0mm;
}