How to reduce bottom white space and bold all content in a template?

Store Design

Topic summary

A user is customizing a 100mm x 100mm shipping label template and encountering two specific issues:

Problems:

  • Excessive white space appearing at the bottom of the template
  • Need to make all text content bold throughout the design

Template Details:
The code includes standard shipping label elements:

  • Shop name and order information
  • “Ship to” and “From” address sections
  • Date formatting
  • Uses Liquid templating syntax for dynamic content

Code Issues Noted:
The provided code contains corrupted/reversed text in portions of the “From” address section, which may be contributing to rendering problems.

The user is seeking CSS or template modifications to eliminate bottom padding/margins and apply bold styling globally to all text elements. No solutions have been provided yet.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hii

We would like to use the template width 100 MM TO hight 100 MM. We have prepared the code But we unable to reduce the while space on Bottom on code. also we need to bold all the content kindly help me

{{ shop.name }}

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 %}

From

{% if shop_address.company != blank %} {{shop_address.company }} {% if shop_address.company != blank %}
{{ shop_address.address1 }} {% endif %}
{{ shop_address.address2 }} {% if shop_address.address2 != blank %}
{{ shop_address.city }} {% endif %} {% if shop_address.zip != blank %}
{{ shop_address.zip }} {% endif %}
{{ shop_address.country }} {% else %} No shop_address.summary {% 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 %}
body { font-size: 30px; }
  • {
    box-sizing: border-box;
    }

.wrapper {
width: 890px;
margin: auto;
padding: 1em;
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: 1em 0;
}

.address-detail {
margin: 0.35em 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: 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;
}

<div class="wrapper">
<div class="header">
<div class="shop-title">
<p class="to-uppercase">
{{ shop.name }}
</p>
</div>
<div class="order-title">
<p class="text-align-right">
Order {{ order.name }}
</p>
<p class="text-align-right">
{{ order.created_at | date: "%B %e, %Y" }}
</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="shop_address.company">
<p class="subtitle-bold to-uppercase">
From 
</p>
<p class="address-detail">
{% if shop_address.company != blank %}
{{shop_address.company }}
{% if shop_address.company != blank %}
<br>
{{ shop_address.address1 }}
{% endif %}
<br>
{{ shop_address.address2 }}
{% if shop_address.address2 != blank %}
<br>
{{ shop_address.city }}
{% endif %}
{% if shop_address.zip != blank %}
<br>
{{ shop_address.zip }}
{% endif %}
<br>
{{ shop_address.country }}
{% else %}
No shop_address.summary
{% 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">
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">
</div>
</div>
<style type="text/css">
body {
font-size: 30px;
}

* {
box-sizing: border-box;
}

.wrapper {
width: 890px;
margin: auto;
padding: 1em;
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: 1em 0;
}

.address-detail {
margin: 0.35em 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: 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>