I had made some changes to my packing slip template, because I need that only the receiver info is shown .
The problem is, I am having some troubles with the CSS part. When I preview the template, the text is appearing cropped in the middle of the page. In CSS, I had defined my page layout to be 80*40mm, that is my labels size, however I am missing something because the text is not appearing in all the layout.
Thats the preview link: https://storage.googleapis.com/html2pdf/1_Shopify_76956631366/75bb26c3e9631e7768f445d8ac3196696f17c95bcad705b416c6bbb4170e138c/packing_slip.pdf?GoogleAccessId=html2pdf-production%40shopify-applications.iam.gserviceaccount.com&Expires=1714379463&Signature=fTKvH4bmCvAb6w%2BKgJBPryPiKAOHoE84KbeSbERh76wgVK0xahcy1p5Ubpx8xx01quL1D725sn4%2B6yUhRsNaPLU1t8PH41mfacqFCfXctRGdt2xIC2QUx9SX5AUHUP6FDEFDDKQSSua20F%2BWHOMYHGVMq6l0SsvJDw5Wi3sBhsEpRYGcM0dm9C19lX9INpQ%2Fnq5qOtt6sS%2BY5EaHjw5XWrd6slGtiuoxD1233A5oJSTOjCWDBP%2FvZnOr7R4YRTOhFxxfKcMmeDME0RqUDixQbtwC5tfMabxc5TPsSR2s8yIDQZXz78GkMryEWIqo8PhXAMqZzRVOaozspB%2BcT4InQQ%3D%3D&response-content-disposition=inline%3B+filename%3D%22packing_slip.pdf%22%3B+filename%2A%3DUTF-8%27%27packing_slip.pdf&response-content-type=application%2Fpdf
And this is the code I am using:
{% if delivery_method.instructions != blank %}
Entrega para
{% else %}
Destinatário
{% endif %}
{% if shipping_address != blank %}
{{ shipping_address.name }}
{% if shipping_address.company != blank %}
{{ shipping_address.company }}
{% endif %}
{{ shipping_address.address1 }}
{% if shipping_address.address2 != blank %}
{{ shipping_address.address2 }}
{% endif %}
{{ shipping_address.zip }}
{{ shipping_address.city }}
{{ shipping_address.country }}
{% if shipping_address.phone != blank %}
Contacto {{ shipping_address.phone }}
{% endif %}
{% else %}
Sem endereço de envio
{% endif %}
@Page {
size: 80mm 40mm;
}
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%; /* Ensure full width for printing */
height: 100%; /* Ensure full height for printing */
}
* {
box-sizing: border-box;
}
.wrapper {
width: 831px;
margin: auto;
padding: 4em;
font-family: "Noto Sans", sans-serif;
font-weight: 250;
}
.header {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
}
.header p {
margin: 0;
}
.shop-title {
-webkit-box-flex: 6;
-webkit-flex: 6;
flex: 6;
font-size: 1.9em;
}
.order-title {
-webkit-box-flex: 4;
-webkit-flex: 4;
flex: 4;
}
.customer-addresses {
width: 100%;
display: inline-block;
margin: 2em 0;
}
.address-detail {
margin: 0.7em 0 0;
line-height: 1.5;
}
.subtitle-bold {
font-weight: bold;
margin: 0;
font-size: 0.85em;
}
.to-uppercase {
text-transform: uppercase;
}
.text-align-right {
text-align: right;
}
.shipping-address {
float: left;
min-width: 18em;
max-width: 50%;
}
.billing-address {
padding-left: 20em;
min-width: 18em;
}
.order-container {
padding: 0 0.7em;
}
.order-container-header {
display: inline-block;
width: 100%;
margin-top: 1.4em;
}
.order-container-header-left-content {
float: left;
}
.order-container-header-right-content {
float: right;
}
.flex-line-item {
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: center;
margin: 1.4em 0;
page-break-inside: avoid;
}
.flex-line-item-img {
margin-right: 1.4em;
min-width: {{ desired_image_size }}px;
}
.flex-line-item-description {
-webkit-box-flex: 7;
-webkit-flex: 7;
flex: 7;
}
.line-item-description-line {
display: block;
}
.flex-line-item-description p {
margin: 0;
line-height: 1.5;
}
.flex-line-item-quantity {
-webkit-box-flex: 3;
-webkit-flex: 3;
flex: 3;
}
.subdued-separator {
height: 0.07em;
border: none;
color: lightgray;
background-color: lightgray;
margin: 0;
}
.missing-line-items-text {
margin: 1.4em 0;
padding: 0 0.7em;
}
.notes {
margin-top: 2em;
}
.notes p {
margin-bottom: 0;
}
.notes .notes-details {
margin-top: 0.7em;
}
.footer {
margin-top: 2em;
text-align: center;
line-height: 1.5;
}
.footer p {
margin: 0;
margin-bottom: 1.4em;
}
hr {
height: 0.14em;
border: none;
color: black;
background-color: black;
margin: 0;
}
.aspect-ratio {
position: relative;
display: block;
background: #fafbfc;
padding: 0;
}
.aspect-ratio::before {
z-index: 1;
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid rgba(195,207,216,0.3);
}
.aspect-ratio--square {
width: 100%;
padding-bottom: 100%;
}
.aspect-ratio__content {
position: absolute;
max-width: 100%;
max-height: 100%;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}