Packing Slip Styling - CSS puzzle: logo centered above order number

Store Design
1

Hello everyone,

I’ve been trying to figure out what I’m doing wrong styling a packing slip template within the shipping settings. I have a design in mind that has the logo in the top center with the order number and date below it, all justified center. When using my own visual code editor or opening it on a browser, the code I’ve used works fine, but then transferring it over to the Shopify packing slip template the css is not being applied in the same way. I’m wondering if there is some sort of css not supported or what’s going on here? Thank you for your help anyone who can shed a little light on the situation.

Here is the code I’m working from below. You can see I’ve changed the default in the .header from flex-direction: row to :column but it doesn’t change the format when previewing the template.


  

    

      LOGO
    

    
      

        Order {{ order.name }}
      

      

        {{ order.created_at | date: "%B %e, %Y" }}
      

    

  

  
    

      

        Ship to
      

      

        {% 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 %}
          {% if shipping_address.city_province_zip != blank %}
            

            {{ shipping_address.city_province_zip }}
          {% endif %}
          

          {{ shipping_address.country }}
        {% else %}
          No shipping address
        {% endif %}
      

    

    
      

        Bill to
      

      

        {% if billing_address != blank %}
          {{ billing_address.name }}
          {% if billing_address.company != blank %}
            

            {{ billing_address.company }}
          {% endif %}
          

          {{ billing_address.address1 }}
          {%  if billing_address.address2 != blank %}
            

            {{ billing_address.address2 }}
          {% endif %}
          {% if billing_address.city_province_zip != blank %}
            

            {{ billing_address.city_province_zip }}
          {% endif %}
          

          {{ billing_address.country }}
        {% else %}
          No billing address
        {% endif %}
      

    

  

  

---

  
    

      

        

          Items
        

      

      
        

          Quantity
        

      

    

    {% for line_item in line_items_in_shipment %}
      
        

          

            
              **{{ line_item.title }}**
            
            {% if line_item.variant_title != blank %}
              
                {{ line_item.variant_title }}
                {% if line_item.sku != blank %}
                  •
                  {{ line_item.sku }}
                {% endif %}
              
            {% elsif line_item.sku != blank %}
              
                {{ line_item.sku }}
              
            {% endif %}
          

        

        
          

            {{ line_item.shipping_quantity }} of {{ line_item.quantity }}
          

        

      

    {% endfor %}
  

  {% unless includes_all_line_items_in_order %}
    

---

    

      There are other items from your order not included in this shipment.
    

  {% endunless %}
  

---

  {% if order.note != blank %}
    
      

        Notes
      

      

        {{ order.note }}
      

    

  {% endif %}
  
    

      Thank you for shopping with us!
    

    

      <strong>
        {{ shop.name }}
      </strong>
      

      {{ shop_address.address1 }}, {{ shop_address.city }}, {{ shop_address.province_code }}, {{ shop_address.zip }}, {{ shop_address.country }}
      

      {{ shop.email }}
      

      {{ shop.domain }}
2

Update: I tried downloading the Order Printer App and I was able to style that much more easily since the preview window is able to be ‘inspected’ with the browser development tools. I’m still confused as to why the same code in Order Printer will not work for the native Shopify packing list. Feels like the difference between the print window pdf rendering possibly. Perhaps someone can shed some light on the differences in coding needed between the Order Printer App and the native Shopify packing slip shipping settings.