I have an option set for a specific sized Label – in this case the label size for the Dymo 30252 label is 3.5" x 1.1”
I am going to start with my size being 3.00” x 1.00” just to show you how it works with these dimensions.
I am passing in HTML into my bubble page into a pop-up element to create the label.
The HTML is at the end of this document for you…
A java script is run to update the label
So when it is run at a 3.00 x 1.00 I get the following result…which is correct.
However, If I change and the ONLY change I make is to the Height and Width making it 3.5x1.1
I get the following result – which is INCORRECT and two pages. And no it doesn’t matter – if I put the trailing zero’s – tried that as well.
HTML for Label –
3.00" x 1.00" Label
@page {
size: 3.00in 1.00in; /* width x height */
margin: 0;
}
@media print {
html, body {
width: 3.00in;
height: 1.00in;
margin: 0;
padding: 0;
overflow: hidden;
font-family: Arial, sans-serif;
}
}
.page-border {
width: 3.00in;
height: 1.00in;
box-sizing: border-box;
border: 1.5mm solid transparent; /* adjust if desired */
overflow: hidden; /* prevent overflow to a second page */
}
/* Main container: horizontal layout */
.label-container {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 100%;
box-sizing: border-box;
background-color: white;
padding: 0.5mm; /* reduced padding to avoid overflow */
}
/* LEFT: Vertical Entry ID */
.vertical-entry {
writing-mode: vertical-rl; /* text flows vertically */
text-orientation: mixed;
transform: rotate(180deg);
font-size: 5mm;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
margin-right: 3mm;
}
/* MIDDLE: Wine details (brand, wine, RS, classification, competition) */
.wine-details {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1; /* take remaining horizontal space */
line-height: 1.1;
text-align: center;
}
.brand-name {
font-weight: bold;
margin-bottom: 0.5mm;
font-size: 3.5mm; /* largest text */
}
.wine-name {
margin-bottom: 0.5mm;
font-size: 3.25mm; /* same as brand name */
}
.rs {
margin-bottom: 0.5mm;
font-size: 3mm; /* slightly larger than competition */
}
.classification {
margin-bottom: 0.5mm;
font-size: 2mm; /* slightly larger than competition */
}
.competition {
margin-bottom: 0.5mm;
font-size: 1.5mm; /* smallest text */
}
/* RIGHT: QR code + disclaimers */
.qr-disclaimer {
position: relative;
width: 22mm; /* container for QR code & disclaimers */
height: 100%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* The QR code is centered in this container */
.qr-code {
max-width: 80%;
max-height: 80%;
object-fit: contain;
}
/* Disclaimers repositioned to be closer to the QR code edge */
.disclaimer-top {
position: absolute;
top: -0.5mm; /* bring closer to top edge */
left: 50%;
transform: translateX(-50%);
font-size: 2mm;
white-space: nowrap;
}
.disclaimer-bottom {
position: absolute;
bottom: -0.5mm; /* bring closer to bottom edge */
left: 50%;
transform: translateX(-50%);
font-size: 2mm;
white-space: nowrap;
}
.disclaimer-vertical {
position: absolute;
right: -7mm; /* bring closer to right edge */
top: 50%;
transform: translateY(-50%) rotate(90deg);
transform-origin: center;
font-size: 2mm;
white-space: nowrap;
}
E1511A
<!-- Middle: Wine Details -->
<div class="wine-details">
<div class="brand-name" id="brand-name">The Blind Horse Winery</div>
<div class="wine-name" id="wine-name">2023 White Stallion</div>
<div class="rs" id="rs">RS 0.00%</div>
<div class="classification" id="classification">White Blend: Vinifera (165)</div>
<div class="competition" id="competition">2025 Texas International Wine Competition</div>
</div>
<!-- Right: QR Code + Disclaimers -->
<div class="qr-disclaimer">
<img src="" alt="QR Code" class="qr-code" id="qr-code">
<div class="disclaimer-top">Sample Only</div>
<div class="disclaimer-vertical">Contains Sulfites</div>
<div class="disclaimer-bottom">Not for Resale</div>
</div>
</div>
Enable “Custom Format” – If you haven’t already, try setting the exact width and height of the label using the Custom Format option in the plugin.
Check for Invisible Margins or Scaling Issues
Force the PDF to Match Exact Dimensions
Manually Set the Plugin’s Margins to Zero
Test With ‘Fit to Page’ Disabled
Use a Different PDF Format (if applicable)