This is what my page looks regardless of width of the window.. enter image description here
No added margin or padding at top. Now this is what happens when I do window.print() and select a wider width paper size.enter image description here. No problem still no added margin but when I try to select a thinner paper size, this what happens..enter image description here. You can see there is added margin or padding at the top and I found out that this is what gives me from importing the bootstrap.min.css 4.4.1. Here is what happens when I don't import bootstrap and select even thinner paper size..enter image description here. Which is good but since I am using the bootstrap for styling of my whole project, I cannot proceed like this. So please help me solve my issue. Thank you in advance.
Note that I already tried setting margin, padding using @media print. This what I did but nothing happened at all.enter image description here For real it looks like there is an element above html element. See picture, this is where I set border style for body and other element so I can tell where is the body. enter image description here
CodePudding user response：
I am not so sure if this will work, but i tried to implement your design on my computer. On the print section, try changing the "Margin" setting from "default" to "none".
CodePudding user response：
In the same way that you you can add CSS @media queries to do different things with different sized screens, you can also do that for print. I've cobbled it together but something like the following might work well (simply tries to align all content to the top).....
@media print {
align-content: flex-start;
}
Or, as an afterthought, it may need to be done like this....
@media print {
body{
align-content: flex-start;
}
}
<!-- I've tried to move the entire Body to the top but you should
use any relevant tag that applies -->