topic Edit CSS for Downloading Quotes in CMS Development

Edit CSS for Downloading Quotes

JLittle2 — Wed, 21 Feb 2024 18:36:39 GMT

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!

Re: Edit CSS for Downloading Quotes

Jaycee_Lewis — Thu, 22 Feb 2024 22:21:38 GMT

Hi, @JLittle2 👋 Thanks for your question. Let's invite a few of our community members who have relevant experience — hey @Bryantworks @louischausse, have you built anything similar recently?

Best,

Jaycee

Re: Edit CSS for Downloading Quotes

JLittle2 — Mon, 26 Feb 2024 16:57:42 GMT

I don't know all the specifics but turns out you can't put @media print in the css file because the custom css file is compiled with the regular css file and all the media attributes are set to "screen". So, I just added a couple lines of css: <style> "@media print { ..."etc} </style> to the html file and was able to change the download styles!

Hope this helps someone else, because man was it was a headache for me.