Hi all,
I’ve been working with a child theme to edit a quote template’s html and css. I’ve managed to make the quote responsive across all device types and screen sizes but I’m having difficulty getting the download version of the quote correct.
Currenty when I click the download button on a quote the downloaded version is badly squashed and ends up on multiple pages. The second half of the quote is below.
The main theme’s css contains:
@media print {
.hs-quotes--modern .container {
max-width: unset;
}
.hs-quotes--modern .options {
display: none;
}
.quote-page-container {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
.hs-quotes--modern .header,
.hs-quotes--modern .colored-section,
.hs-quotes--modern .comments,
.hs-quotes--modern .terms,
.hs-quotes--modern .payment,
.hs-quotes--modern .esign,
.hs-quotes--modern .options,
.hs-quotes--modern .contacts {
break-inside: avoid;
}
}
I used it as a template and my css is:
I think there must be something in the hubspot code that is overriding my styling, but I can’t seem to figure it out. Plus its nearly impossible to test, since you have to create a new quote and get it approved before the download link works, and I haven’t found a way to preview a download. If anyone has an easier way to test or knows of some css class that might be mucking things up I’d appreciate the help!
Thanks for your question. Let’s invite a few of our community members who have relevant experience — hey