# Edit CSS for Downloading Quotes

**URL:** <https://community.hubspot.com/t/edit-css-for-downloading-quotes/100694>\
**Category:** CMS Development\
**Tags:** css, html\
**Created:** [February 21, 2024, 6:36pm UTC](https://community.hubspot.com/t/edit-css-for-downloading-quotes/100694 "2024-02-21T18:36:39Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![JLittle2](https://avatars.discourse-cdn.com/v4/letter/j/87869e/32.png) [@JLittle2](https://community.hubspot.com/u/JLittle2)\
**Post date:** [February 21, 2024, 6:36pm UTC](https://community.hubspot.com/t/edit-css-for-downloading-quotes/100694/1 "2024-02-21T18:36:39Z")

</div>

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](https://d2qpr2jzcazej7.cloudfront.net/original/2X/0/0e21e9304f90231e4ec35f8d1a93293a14cca0e5.jpeg)

The main theme’s css contains:

[@media](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477) 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.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/2/2aa9d6c95d182fd925fa193629f54c1f1d9902bd.jpeg)

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!

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [February 22, 2024, 10:21pm UTC](https://community.hubspot.com/t/edit-css-for-downloading-quotes/100694/2 "2024-02-22T22:21:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JLittle2](https://avatars.discourse-cdn.com/v4/letter/j/87869e/32.png) [@JLittle2](https://community.hubspot.com/u/JLittle2)\
**Post date:** [February 26, 2024, 4:57pm UTC](https://community.hubspot.com/t/edit-css-for-downloading-quotes/100694/3 "2024-02-26T16:57:42Z")

</div>

I don’t know all the specifics but turns out you can’t put [@media](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477) 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.