0

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:

SM vs MD page print example

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

Batzi
  • 369
  • 2
  • 7
  • 15

1 Answers1

0

try the @page

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

@page{
margin:0mm;
}
h3t1
  • 1,126
  • 2
  • 18
  • 29
  • I added it to my print stylesheet and it doesn't really affect anything. – Batzi Dec 19 '16 at 19:11
  • in that case you can see this link I think it's the same issue http://stackoverflow.com/questions/29063886/print-meta-for-print-page – h3t1 Dec 19 '16 at 19:15
  • This page is addressing a different issue which is related to the screen orientation. My page zooms out when I try to print under an XS or SM screen size. It has to do with Bootstrap. I just can't find the part that is breaking. – Batzi Dec 19 '16 at 19:19