Packing Slip: White Space, Alignment, and Font Size

Sailormean
Tourist
17 0 1

I'm trying to change a few things on the packing slip, but can't seem to figure out how to do so on my own.

I'm trying to print on thermal receipt paper (continuous, 2 7/16" roll) and would like to:

- minimize the white space between the left and right sections
- make the font larger
- minimize the outside margins/padding
- retain formatting/alignment

See image below for what my code currently generates compared to what I'm trying to achieve:

receipt.png

If I try and up the font size within my current code, the right section doesn't shift and subsequently gets cut off:

receipt 2.JPG

My current code:

 

<body><div class="wrapper">
    <div class="header">
      <div class="shop-title">
        <p class="to-uppercase">
          {{ shop.name }}
        </p>
      </div>
    </div>
    <div class="customer-addresses">
      <div class="shipping-address">
        <p class="subtitle-bold to-uppercase">
          Ship to
        </p>
        <p class="address-detail">
          {% if shipping_address != blank %}
            {{ shipping_address.name }}
            {% if shipping_address.company != blank %}
              <br>
              {{ shipping_address.company }}
            {% endif %}
            <br>
            {{ shipping_address.address1 }}
            {% if shipping_address.address2 != blank %}
              <br>
              {{ shipping_address.address2 }}
            {% endif %}
            {% if shipping_address.city_province_zip != blank %}
              <br>
              {{ shipping_address.city_province_zip }}
            {% endif %}
            <br>
            {{ shipping_address.country }}
          {% else %}
            No shipping address
          {% endif %}
        </p>
      </div>

      <div class="billing-address">
        <p class="sub-bold to-uppercase">
            Order {{ order.name }}
        </p>
        <p class="order-title">
            {{ order.created_at | date: "%B %e, %Y" }}
        </p>
      </div>
    </div>
    <hr>
    <div class="order-container">
      <div class="order-container-header">
        <div class="order-container-header-left-content">
          <p class="subtitle-bold to-uppercase">
            Items
          </p>
        </div>
        <div class="order-container-header-right-content">
          <p class="subtitle-bold to-uppercase">
            Quantity
          </p>
        </div>
      </div>
      {% for line_item in line_items_in_shipment %}
        <div class="flex-line-item">
          <div class="flex-line-item-description">
            <p>
              <span class="line-item-description-line">
                <strong>{{ line_item.title }}</strong>
              </span>
              {% if line_item.variant_title != blank %}
                <span class="line-item-description-line">
                  {{ line_item.variant_title }}
                  {% if line_item.sku != blank %}
                    •
                    {{ line_item.sku }}
                  {% endif %}
                </span>
              {% elsif line_item.sku != blank %}
                <span class="line-item-description-line">
                  {{ line_item.sku }}
                </span>
              {% endif %}
            </p>
          </div>
          <div class="flex-line-item-quantity">
            <p class="text-align-right">
              {{ line_item.shipping_quantity }} of {{ line_item.quantity }}
            </p>
          </div>
        </div>
      {% endfor %}
    </div>
    {% unless includes_all_line_items_in_order %}
      <hr class="subdued-separator">
      <p class="missing-line-items-text">
        There are other items from your order not included in this shipment.
      </p>
    {% endunless %}
    <hr>
    {% if order.note != blank %}
      <div class="notes">
        <p class="subtitle-bold to-uppercase">
          Notes
        </p>
        <p class="notes-details">
          {{ order.note }}
        </p>
      </div>
    {% endif %}
    <div class="footer">
      <p>
        Thank you for shopping with us!
        <br>。:゚૮ ˶ˆ ﻌ ˆ˶ ა ゚:。
      </p>
      <p>
        <strong>
          {{ shop.name }}
        </strong>
        <br>
        {{ shop.email }}
        <br>
        {{ shop.domain }}
      </p>
    </div>
  </div>
  <style type="text/css">
     @font-face {
      font-family: "VT323";
      src: url(https://cdn.shopify.com/s/files/1/1319/9245/files/VT323-Regular.woff2?v=1631648865);
    }
    
    body {
      font-family: 'VT323', monospace;
      font-size: 30px;
    }

    p  {
      font-family: 'VT323', monospace;
}
  
    * {
      box-sizing: border-box;
    }
  
    .wrapper {
      width: 871px;
      margin: auto;
      font-family: 'VT323', monospace;
      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 {
      width: 100%;
      display: inline-block;
      margin: 1em 0;
      margin: 0.35em 0 0;
      line-height: 1.5;
      text-align: right;
    }
  
    .customer-addresses {
      width: 100%;
      display: inline-block;
      margin: 1em 0;
    }
  
    .address-detail {
      margin: 0.35em 0 0;
      line-height: 1.5;
    }
  
    .subtitle-bold {
      font-weight: bold;
      margin: 0;
      font-size: 0.85em;
    }
    
    .sub-bold {
      font-weight:bold;
      margin: 0;
      font-size: 0.85em;
      text-align:right;
    }
  
    .to-uppercase {
      text-transform: uppercase;
    }
  
    .text-align-right {
      text-align: right;
    }
  
    .shipping-address {
      float: left;
      min-width: 14em;
      max-width: 50%;
    }
  
    .billing-address {
      padding-left: 16em;
      min-width: 14em;
    }
  
    .order-container {
      padding: 0 0.35em;
    }
  
    .order-container-header {
      display: inline-block;
      width: 100%;
      margin-top: 0.7em;
    }
  
    .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: 0.7em 0;
      page-break-inside: avoid;
    }
  
    .flex-line-item-description {
      -webkit-box-flex: 9;
      -webkit-flex: 9;
      flex: 9;
    }
  
    .line-item-description-line {
      display: block;
    }
  
    .flex-line-item-description p {
      margin: 0;
      line-height: 1.5;
    }
  
    .flex-line-item-quantity {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
    }
  
    .subdued-separator {
      height: 0.035em;
      border: none;
      color: lightgray;
      background-color: lightgray;
      margin: 0;
    }
  
    .missing-line-items-text {
      margin: 0.7em 0;
      padding: 0 0.35em;
    }
  
    .notes {
      margin-top: 1em;
    }
  
    .notes p {
      margin-bottom: 0;
    }
  
    .notes .notes-details {
      margin-top: 0.35em;
    }
  
    .footer {
      margin-top: 1em;
      text-align: center;
      line-height: 1.5;
    }
  
    .footer p {
      margin: 0;
      margin-bottom: 0.7em;
    }
  
    hr {
      height: 0.07em;
      border: none;
      color: black;
      background-color: black;
      margin: 0;
    }
  </style></body></html>

 

Any help appreciated, thanks!

Replies 3 (3)

oscprofessional
Shopify Partner
15843 2371 3073

Hi @Sailormean ,

Please share the url where you want modification ?

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Sailormean
Tourist
17 0 1
Hi @oscprofessional — sorry if I’m misunderstanding but it’s for my packing
slip not a page on the site. Do you want a link to a preview of a packing
slip or..?

RoyalPetBox
Visitor
2 0 0

I was able to change the Notes section on my packing slip to make the gift message much larger by adding ONE line of code to the HTML for the packing slip:

 

BEFORE (ORIGINAL CODE):
.notes .notes-details {
margin-top: 0.7em;
}

 

AFTER ADDING ONE LINE:


.notes .notes-details {
margin-top: 0.7em;
font-size: 2.0em;
}

 

This worked fabulously for me!