3

I can't seem to get my responsive font size to work in the email I'm creating. Issues is with outlook, gmail, aol.

enter image description here

Here's the HTML

<th class="small-2 large-2 columns" valign="middle" style="Margin: 0 auto; background-color: #E7E7E7; border: 2px solid #ffffff; color: #0a0a0a; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0 auto; min-height: 85px; padding: 0; padding-bottom: 16px; padding-left: 0 !important; padding-right: 0 !important; padding-top: 20px; text-align: left; width: 80.66667px;">
   <p class="field text-center" style="Margin: 0; Margin-bottom: 10px; color: #666666 !important; font-family: 'Open Sans', sans-serif; font-size: 8px; font-weight: normal; line-height: 1.75; margin: 0; margin-bottom: 2px; padding: 0; text-align: center;">Price</p>
   <p pardot-region="" class="number text-center" style="Margin: 0; Margin-bottom: 10px; color: #333333; font-family: 'Open Sans', sans-serif; font-size: 10px; font-weight: bold; line-height: 1.75; margin: 0; margin-bottom: 10px; padding: 0; text-align: center;">$512.72</p>
</th>

Here's the CSS that I inlined later with the foundation inline tool

.financial-table th p.field {
  color: #666666 !important;
  margin-bottom: 2px;
  font-size: 8px;
}

.financial-table th p.number {
  font-size: 10px;
  color: #333333;
  font-weight: bold;
}

@media only screen and (min-width:500px){

  .financial-table th p.number {
    font-size: 16px !important;
  }
  .financial-table th p.field {
    font-size: 12px !important;
  }
}

What am I doing wrong?

Peekay
  • 175
  • 3
  • 13

2 Answers2

1

Your code seems to be working perfectly, try selecting the paragraphs with just p.field and p.number like so

p.field {
  color: #666666 !important;
  margin-bottom: 2px;
  font-size: 8px;


}

p.number{
  font-size: 10px;
  color: #333333;
  font-weight: bold;
}

@media only screen and (min-width:500px){

  p.number {
    font-size: 16px !important;
  }
  p.field {
    font-size: 12px !important;
  }
}

Here is the live code. jsfiddle. resize the result box to see the effect

Kamsi Ibeziako
  • 61
  • 3
  • tried that but still getting the issue. I should mention that this is for email. Not really sure how responsive styles work with inline css to be honest. – Peekay Jun 05 '18 at 19:46
1

So got this working finally. Adding a span class tag with a media query to the element fixed with

<th class="small-2 large-2 columns" valign="middle" style="Margin: 0 auto; background-color: #E7E7E7; border: 2px solid #ffffff; color: #0a0a0a; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0 auto; min-height: 85px; padding: 0; padding-bottom: 16px; padding-left: 0 !important; padding-right: 0 !important; padding-top: 20px; text-align: left; width: 80.66667px;">
   <p class="field text-center" style="Margin: 0; Margin-bottom: 10px; color: #666666 !important; font-family: 'Open Sans', sans-serif; font-size: 8px; font-weight: normal; line-height: 1.75; margin: 0; margin-bottom: 2px; padding: 0; text-align: center;"><span class="mobile-number">Price</span></p>
   <p pardot-region="" class="number text-center" style="Margin: 0; Margin-bottom: 10px; color: #333333; font-family: 'Open Sans', sans-serif; font-size: 10px; font-weight: bold; line-height: 1.75; margin: 0; margin-bottom: 10px; padding: 0; text-align: center;"><span class="mobile-number">$512.72<span></p>
</th>
Peekay
  • 175
  • 3
  • 13
  • This is an odd work around. You said `Issues is with outlook, gmail, aol`, which one did this fix? Gmail? – Syfer Jun 06 '18 at 00:58
  • @Syfer all of them. How does responsive styles work when using a class vs inline-style. Doesn't the inline style always take precedence? – Peekay Jun 06 '18 at 17:26
  • Inline does take precedence unless there is CSS in the head with important overwriting it, the reason I was asking is I never had to put an extra span to get the responsive part to work. Targeting the right class worked me always. Good to know that worked for you. Am not a fan of inliner to be honest. – Syfer Jun 06 '18 at 19:11