How can I edit and align text in a packing slip template?

[ermyv]

Hey guys!
Maybe someone of you can help me with two questions about customization of the packing slip template.

1) In the place highlighted in red, I want to write two words "Your order", but since there is a space between the words, these two words are located on two lines, and I want on one line.

If I add an underscore between the words, then they are on the same line as they should! So the problem is in the space! How to fix it? I want space between words, but I want words on one line ...

2) I would like to align the bar with the product quantity. I want to align the column in the middle. Is it possible to fix it?

I would be glad for any of your help, thanks !!!

[suyash1]

@ermyv - can you please share packing slip preview? so I can check it on browser and let you know if we can do it via css

[ermyv]

@suyash1 

[suyash1]

@ermyv - no not image, do you have link to open in browser?

[ermyv]

@suyash1 

Sorry, here is the link, this page opens when I click on the button "Preview template":

https://storage.googleapis.com/html2pdf/1_Shopify_51079413959/82f9ba49f58ea13b49d8b0f8dbae382688d285...

[suyash1]

@ermyv - this is pdf this too will not help, is it ok if you add me as staff or collaborator? I will check it from code

[ermyv]

@suyash1 

I hope now I understood you correctly)) below I added the code for the template!

But if it is convenient for you, I can send you an invitation and add you as a staff

<div class="wrapper">
  <div class="header">
    <div class="shop-title">
      <p class="to-uppercase">
        <img src="https://cdn.shopify.com/s/files/1/0510/7941/3959/files/byChuri_logos__1.png?v=1613758113" style="width: 340px; height: 130px;">
      </p>
    </div>
    <div class="order-title"><br><br>
      <p class="text-align-right">
        Заказ {{ order.name }}
      </p>
      <p class="text-align-right"><br><br>
        {{ order.created_at | date: "%d/%m/%Y" }}
      </p>
    </div>
  </div>
  <div class="customer-addresses">
    <div class="shipping-address">
      <p class="subtitle-bold to-uppercase">
        {% if delivery_method.instructions != blank %}
          Delivery to
        {% else %}
          Адрес доставки
        {% endif %}
      </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.zip != blank %}
            <br>
            {{ shipping_address.zip }}
          {% endif %}
          <br>
          {{ shipping_address.country }}
          {% if shipping_address.phone != blank %}
            <br>
            {{ shipping_address.phone }}
          {% endif %}
        {% else %}
          No shipping address
        {% endif %}
      </p>
    </div>
    <div class="billing-address">
      <p class="subtitle-bold to-uppercase">
        Платежный адрес
      </p>
      <p class="address-detail">
        {% if billing_address != blank %}
          {{ billing_address.name }}
          {% if billing_address.company != blank %}
            <br>
            {{ billing_address.company }}
          {% endif %}
          <br>
          {{ billing_address.address1 }}
          {%  if billing_address.address2 != blank %}
            <br>
            {{ billing_address.address2 }}
          {% endif %}
          {% if billing_address.city_province_zip != blank %}
            <br>
            {{ billing_address.city_province_zip }}
          {% endif %}
          <br>
          {{ billing_address.country }}
        {% else %}
          No billing address
        {% endif %}
      </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">
          Ваш_заказ:
        </p>
      </div>
      <div class="order-container-header-right-content">
        <p class="subtitle-bold to-uppercase">
          Количество
        </p>
      </div>
    </div>

    {% comment %}
    To adjust the size of line item images, change desired_image_size.
    The other variables make sure your images print at high quality.
    {% endcomment %}
    {% assign desired_image_size = 58 %}
    {% assign resolution_adjusted_size = desired_image_size | times: 300 | divided_by: 72 | ceil %}
    {% capture effective_image_dimensions %}
      {{ resolution_adjusted_size }}x{{ resolution_adjusted_size }}
    {% endcapture %}

    {% for line_item in line_items_in_shipment %}
      <div class="flex-line-item">
        <div class="flex-line-item-img">
          {% if line_item.image != blank %}
            <div class="aspect-ratio aspect-ratio-square" style="width: {{ desired_image_size }}px; height: {{ desired_image_size }}px;">
              {{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }}
            </div>
          {% endif %}
        </div>
        <div class="flex-line-item-description">
          <p>
            <span class="line-item-description-line">
              {{ line_item.title }}
            </span>
            {% if line_item.variant_title != blank %}
              <span class="line-item-description-line">
                {{ line_item.variant_title }}
              </span>
            {% endif %}
            {% if 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.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 %}
  {% if delivery_method.instructions != blank %}
    <div class="notes">
      <p class="subtitle-bold to-uppercase">
        Delivery instructions
      </p>
      <p class="notes-details">
        {{ delivery_method.instructions }}
      </p>
    </div>
  {% endif %}
  <div class="footer">
    <p>
      Красотка, спасибо, что выбрала нас! 
    </p>
    <p>
      <strong>
        <img src="https://cdn.shopify.com/s/files/1/0510/7941/3959/files/shutterstock_1816313213.jpg?v=1617715971" style="width: 15px; height: 15px;">
        @{{ shop.name }}
      </strong>
      
      <br>
      <img src="https://cdn.shopify.com/s/files/1/0510/7941/3959/files/mail.jpg?v=1617714734" style="width: 15px; height: 10px;">
      {{ shop.email }}
      <br>
      <img src="https://cdn.shopify.com/s/files/1/0510/7941/3959/files/internet.jpg?v=1617714925" style="width: 14px; height: 14px;">
      {{ shop.domain }}
    </p>
  </div>
</div>
<style type="text/css">
  body {
    font-size: 15px;
  }

  * {
    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;
    margin: 0;
  }

  .header p {
    margin: -2em;
  }

  .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;
    margin-top: 2em;
  }

  .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: #B49A83;
    background-color: #B49A83;
    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;
  }
</style>

[suyash1]

@ermyv - sure, can you please add me to staff? You have my email below. I will check it.

[ermyv]

@suyash1 

I have sent you the invitation!

[suyash1]

@ermyv - I logged in, checking it now

[suyash1 · Accepted solution]

@ermyv - please check packing slip and let me know.

[ermyv]

@suyash1 

Sorry for not responding for a couple of days. I looked, thank you very much, now two words are on the same line! Please tell me, the quantity could not be aligned in the middle?

[suyash1]

@ermyv - I made css change but it breaks the alignment 

[ermyv]

@suyash1 

Ok then let's keep the previous alignment please, I can't change it back myself))

[suyash1]

@ermyv - changed, please check

[ermyv]

@suyash1 

Yes, thank you very much!