Unnecessary left margin coming on print window for HTML content - html

Question

I am generating a coupon type display by html and css without creating and storing the real image on server to save space.
Plan is to display it and get it printed out when user wants to print. I have managed to create the layout by HTML and css and it displays as follows,
But when the Print Now button is clicked there are so much blank space created towards the left side, please see the image below,
I can not figure out what might be the issue here, I am attaching the HTML and CSS below.
HTML
<div class="print-coupon-text">
<div class="pct-heading">
<img src="***image-source***" alt="Created by JAiCOUPONS" />
</div>
<div class="pct-col pct-col-1">
<div class="pct-store-logo">
<img src="***image-source***" alt="Coupon Store" />
</div>
<div class="pct-store-desc">
<span>http://abcdexample.com</span>
<span>#2333, 1st Comfort Road</span>
<span>Redint TF 78999</span>
<span>210 Price Fork Road</span>
<span>Redint TF 78999</span>
<span>[phone]</span>
</div>
</div>
<div class="pct-col pct-col-2">
<span class="pct-offer-1">$50</span>
<span class="pct-offer-2">Off</span>
<span class="pct-offer-3"> Free Icecream </span>
</div>
<div class="pct-col pct-col-3">
<span class="pct-title">Buy 1 Dinner</span>
<span class="pct-title pct-title-end">And get the 2nd one Free</span>
<span class="pct-desc">Dine In, Carryout Only</span>
<span class="pct-desc">Excludes buffet with this coupon</span>
<span class="pct-desc">Not Valid with other Offers</span>
<span class="pct-desc">Expires : 15th Jan</span>
</div>
<div class="pct-footer">
<span class="pct-footer-1">Contact JAiCOUPONS # [phone]</span>
<span class="pct-footer-2">Coupon ID **** | ©JAiCOUPONS.com</span>
</div>
</div>
CSS
.print-coupon-text {
position: relative;
width: 100%;
float: left;
margin-bottom: 10px;
padding: 10px;
border: 1px dashed #000;
border-radius: 10px;
font-size: 10px;
text-align: left;
}
.pct-col {
width: 30%;
float: left;
margin: 0 8px;
}
.pct-store-desc span, .pct-footer span, .pct-desc {
display: block;
}
.pct-col.pct-col-2 {
padding-left: 5px;
padding-top: 85px;
}
.pct-col.pct-col-3 {
padding-top: 40px;
}
.pct-offer-1 {
font-size: 60px;
font-weight: bold;
}
.pct-offer-2 {
font-weight: bold;
}
.pct-offer-3 {
display: block;
}
.pct-title {
display: block;
font-size: 13px;
}
.pct-title-end {
border-bottom: 1px dotted;
padding-bottom: 5px;
}
.pct-store-logo img {
width: 150px;
height: 85px;
}
.pct-heading {
position: absolute;
top: 0px;
left: 28%;
}
.pct-heading img {
width: 90%;
}
.pct-footer-1 {
position: absolute;
bottom: 16px;
right: 6px;
}
.pct-footer-2 {
position: absolute;
bottom: 0px;
right: 6px;
}
#media print {
body * {
visibility: hidden;
}
.print-coupon-text, .print-coupon-text * {
visibility: visible;
}
.print-coupon-text {
position: absolute;
left: 0;
top: 0;
}
}
Any help is appreciated.
UPDATE
Initial display is coming on the pop up.

Answer 1

I think you should give fixed width to your div.print-coupon-text
.print-coupon-text{
width: 700px; // or greater/less
}

Answer 2

Hi try displaying the coupon in its own page, you won't have this issue in that case. check screenshots below.
BTW, i was not able to replicate your issue, working fine for me with your code.
EDIT :: Tried using Bootstrap Popup as well, working fine.
.print-coupon-text {
position: relative;
width: 100%;
float: left;
margin-bottom: 10px;
padding: 10px;
border: 1px dashed #000;
border-radius: 10px;
font-size: 10px;
text-align: left;
}
.pct-col {
width: 30%;
float: left;
margin: 0 8px;
}
.pct-store-desc span,
.pct-footer span,
.pct-desc {
display: block;
}
.pct-col.pct-col-2 {
padding-left: 5px;
padding-top: 85px;
}
.pct-col.pct-col-3 {
padding-top: 40px;
}
.pct-offer-1 {
font-size: 60px;
font-weight: bold;
}
.pct-offer-2 {
font-weight: bold;
}
.pct-offer-3 {
display: block;
}
.pct-title {
display: block;
font-size: 13px;
}
.pct-title-end {
border-bottom: 1px dotted;
padding-bottom: 5px;
}
.pct-store-logo img {
width: 150px;
height: 85px;
}
.pct-heading {
position: absolute;
top: 0px;
left: 28%;
}
.pct-heading img {
width: 90%;
}
.pct-footer-1 {
position: absolute;
bottom: 16px;
right: 6px;
}
.pct-footer-2 {
position: absolute;
bottom: 0px;
right: 6px;
}
#media print {
body * {
visibility: hidden;
}
.print-coupon-text,
.print-coupon-text * {
visibility: visible;
}
.print-coupon-text {
position: absolute;
left: 0;
top: 0;
}
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Popup</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="print-coupon-text">
<div class="pct-heading">
<img src="***image-source***" alt="Created by JAiCOUPONS" />
</div>
<div class="pct-col pct-col-1">
<div class="pct-store-logo">
<img src="***image-source***" alt="Coupon Store" />
</div>
<div class="pct-store-desc">
<span>http://abcdexample.com</span>
<span>#2333, 1st Comfort Road</span>
<span>Redint TF 78999</span>
<span>210 Price Fork Road</span>
<span>Redint TF 78999</span>
<span>[phone]</span>
</div>
</div>
<div class="pct-col pct-col-2">
<span class="pct-offer-1">$50</span>
<span class="pct-offer-2">Off</span>
<span class="pct-offer-3"> Free Icecream </span>
</div>
<div class="pct-col pct-col-3">
<span class="pct-title">Buy 1 Dinner</span>
<span class="pct-title pct-title-end">And get the 2nd one Free</span>
<span class="pct-desc">Dine In, Carryout Only</span>
<span class="pct-desc">Excludes buffet with this coupon</span>
<span class="pct-desc">Not Valid with other Offers</span>
<span class="pct-desc">Expires : 15th Jan</span>
</div>
<div class="pct-footer">
<span class="pct-footer-1">Contact JAiCOUPONS # [phone]</span>
<span class="pct-footer-2">Coupon ID **** | ©JAiCOUPONS.com</span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>