Custom Quote Template Beta

ANowlan
Member

Mobile Styling and Generated PDF Issues

Hey all,

 

Thanks for the invite. I've been working on a custom template with @media overrides for mobile styling. However Hubspot is pulling those overrides when it generates the pdf after click "download" on the quotes page.

 

ANowlan_0-1613597721240.png

 

Anyone found a work around to pull the desktop or "full size" initial css settings?

 

My CSS

 

 

@import url('https://fonts.google.com/specimen/Work+Sans?preview.text_type=custom#standard-styles');
{%- set font_stack = theme.global_fonts.primary_font.font ~ ', Helvetica, Arial, sans-serif' %}
{%- set color_scheme = {
  'primary': 'rgba(' ~ theme.global_colors.primary_color.color|convert_rgb ~ ', ' ~ theme.global_colors.primary_color.opacity * 0.01 ~ ')',
  'secondary': 'rgba(' ~ theme.global_colors.secondary_color.color|convert_rgb ~ ', ' ~ theme.global_colors.secondary_color.opacity * 0.01 ~ ')',
  'tertiary': 'rgba(' ~ theme.global_colors.tertiary_color.color|convert_rgb ~ ', ' ~ theme.global_colors.tertiary_color.opacity * 0.01 ~ ')',
  'button_background': 'rgba(' ~ theme.global_colors.button_background_color.color|convert_rgb ~ ', ' ~ theme.global_colors.button_background_color.opacity * 0.01 ~ ')',
  'button_font': 'rgba(' ~ theme.global_colors.button_font_color.color|convert_rgb ~ ', ' ~ theme.global_colors.button_font_color.opacity * 0.01 ~ ')'
}-%}

.hs-proposals {
  font-family: 'Work Sans';
  color: {{ theme.global_fonts.primary_font.color }};
}

.hs-proposals--simple table {
  background-color: {{ color_scheme.tertiary }}
}

.hs-proposals--simple th,
.table__total td:first-child,
.hs-proposals--tall .checkout,
.hs-proposals--tall .background {
  background-color: #ededed;
}

.hs-proposals--simple table,
.hs-proposals--simple td,
.hs-proposals--simple th,
.quote__total,
.hs-proposals .comments,
.hs-proposals .terms,
.hs-proposals .annotation,
.hs-proposals .signature__field:before {
  border-color: {{ color_scheme.secondary }};
}

.payment-checkout-button {
  background: {{ color_scheme.button_background }};
  color: {{ color_scheme.button_font }};
}

.hs-proposals .line-items {
  display: {{ theme.display.line_items }};
}

.hs-proposals .letterhead {
  display: flex;
}

.hs-proposals .signature__verify-button {
  background: {{ color_scheme.button_background }};
  color: {{ color_scheme.button_font }};
  font-family: {{ font_stack }};
}

.hs-proposals #signature__loading-spinner {
  border-top-color: {{ color_scheme.primary }} !important;
}

.hs-proposals #payment__loading-spinner {
  border-top-color: {{ color_scheme.button_background }} !important;
}
.hs-proposals .terms{
  width:100%; max-width: 1250px; margin: auto;
  }

@media all and (max-width:650px) {
  .hs-proposals .letterhead {
  display: block;
}
  
.letterhead_hC{
  width: 100%;
  padding: 1em;
  float:none;
  display:block;
  }
  
  .letterhead_lC{
  width: 100%;
    padding: 1em;
    float:none;
  display:block;
  }
  .hs-proposals .terms{
  width: 90%!important;
  }
  th {
   font-size: 12px!important; 
    line-height: 1em;
    padding-left: .25em!important;
    padding-right: .25em!important;
  }
  td{
   line-height: 1em;
   padding-left: .25em!important;
    padding-right: .25em!important;
  }
  
}

 

 

 

0 Upvotes
1 Reply 1
jmclaren
HubSpot Employee
HubSpot Employee

Mobile Styling and Generated PDF Issues

Hey there, 

Your media query is @media all and (max-width:650px){}

What you are saying is on all media types, print, screen, and speech - if the size is under 650px display this way.

If you don't want to affect the printed page/pdf change "all" to screen.

Related

Jon McLaren

Sr. CMS Developer Advocate

Get started developing on the HubSpot CMS Developer Changelog
How to optimize your CMS Hub site for speed

If my reply answered your question, please mark it as a solution, to make it easier for others to find.