CMS Development

JLittle2
Contributeur

Edit CSS for Downloading Quotes

Résolue

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.

quote pg 2.jpg

 

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:

 

Screenshot 2024-02-21 at 11.12.39 AM.png

 

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!

0 Votes
1 Solution acceptée
JLittle2
Solution
Contributeur

Edit CSS for Downloading Quotes

Résolue

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.

Voir la solution dans l'envoi d'origine

2 Réponses
JLittle2
Solution
Contributeur

Edit CSS for Downloading Quotes

Résolue

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.

Jaycee_Lewis
Gestionnaire de communauté
Gestionnaire de communauté

Edit CSS for Downloading Quotes

Résolue

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

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot