# Quote template extra blank page

**URL:** <https://community.hubspot.com/t/quote-template-extra-blank-page/126833>\
**Category:** CMS Development\
**Tags:** css\
**Created:** [February 25, 2025, 6:04pm UTC](https://community.hubspot.com/t/quote-template-extra-blank-page/126833 "2025-02-25T18:04:55Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![tirabc](https://avatars.discourse-cdn.com/v4/letter/t/3ec8ea/32.png) [@tirabc](https://community.hubspot.com/u/tirabc)\
**Post date:** [February 25, 2025, 6:04pm UTC](https://community.hubspot.com/t/quote-template-extra-blank-page/126833/1 "2025-02-25T18:04:55Z")

</div>

Hi all,

It’s my first post, I hope to put it in the right place.

I coded a new template for quotes, in A4 landscape, everything is good in html render even when printing in pdf from browser.

My issue is when using the download button widget that export the template in PDF, an extra blank page is added.  
I tried many CSS hacks to avoid it but it’s still there.  
Maybe you have some tips to avoid this extra page ?

My pseudo code:  
\<html\>

\<body\>

\<div class=“page-section”\>

… all my template here …

\<section class=“no-print”\>Print widget\</section\>

\</div\>

\</body\>

\</html\>

CSS fix attemps:

/\* 1. Ensure the last element doesn’t cause extra space \*/  
.page-section \> :last-child {  
margin-bottom: 0;  
}

/\* 2. remove print widget on print \*/

[@media](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477) print {  
/\* Remove elements not needed in print \*/  
.no-print {  
display: none;  
}  
/\* Ensure widow/orphan control \*/  
p {  
orphans: 3;  
widows: 3;  
}  
}

/\* 3. force no page break \*/

.page-section {  
page-break-inside: avoid;  
page-break-after: avoid;  
}

/\* Avoid page breaks inside paragraphs \*/  
p {  
page-break-inside: avoid;  
}

/\* Force page breaks before new sections \*/  
.section-title {  
page-break-before: always;  
}

/\* Prevent orphaned headings \*/  
h1, h2, h3, h4, h5, h6 {  
page-break-after: avoid;  
}

/\* 4. fixed margin for main containers body html\*/

[@media](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477) print {  
body, html {  
height: 210mm;

margin: 0;  
padding: 0;  
page-break-after: avoid;

}

}  
Thanks 🙏

---

<div class="post-metadata">

**Author:** ![MichaelMa](https://avatars.discourse-cdn.com/v4/letter/m/b5ac83/32.png) [@MichaelMa](https://community.hubspot.com/u/MichaelMa)\
**Post date:** [February 26, 2025, 3:10pm UTC](https://community.hubspot.com/t/quote-template-extra-blank-page/126833/2 "2025-02-26T15:10:12Z")

</div>

Hard to tell without visual samples of what the quote looks like.

However, do you have any content that is really wide? Either a div with a set width, a wide image or long text that doesn’t break? The extra page could be an extra horizontal page rather than page 2. This could mean it works fine in landscape, with the extra width, but not in portrait where the width is too short.

Maybe try setting a width/max-width on the the html/body also? Perhaps add in overflow: hidden.

---

<div class="post-metadata">

**Author:** ![tirabc](https://avatars.discourse-cdn.com/v4/letter/t/3ec8ea/32.png) [@tirabc](https://community.hubspot.com/u/tirabc)\
**Post date:** [February 26, 2025, 3:39pm UTC](https://community.hubspot.com/t/quote-template-extra-blank-page/126833/3 "2025-02-26T15:39:40Z")

</div>

Here are some screens to give some context: the main page and extra page are in landscape mode.

It seems there is no wide text.

I’ll try setting width on html body

 ![Capture d’écran 2025-02-26 à 16.20.28.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/9/f91b2cb1a9af3da9a0015279c8f4c485c49157a4.jpeg)

 ![Capture d’écran 2025-02-26 à 16.18.40.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/4/f47d407876545c6f339e8734e642436581a4f92f.png)

 ![Capture d’écran 2025-02-26 à 16.15.58.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/1/7193ef6807b07c2770fd34692aa3f6f957f92d02.png)