topic Re: Edit CSS for Downloading Quotes in CMS Development

Edit CSS for Downloading Quotes

JLittle2 — Wed, 21 Feb 2024 19:01:53 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

BérangèreL — Thu, 22 Feb 2024 08:21:04 GMT

Hi @JLittle2, I hope that you are well.

I have moved your post in the Developers Forum so that you can get help from HTML/CSS experts!

I'd like to invite a couple of subject matter experts to this conversation: Hi @elizheleva, @Jnix284 and @alyssamwilie do you have suggestions to help @JLittle2, please?

Also, if anybody else has anything to add and/or share, please feel free to join in the conversation 🙂

Thanks a lot and have a fabulous day!

Best,
Bérangère

Re: Edit CSS for Downloading Quotes

JLittle2 — Mon, 26 Feb 2024 16:59:25 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.