Changing font size in markdown on mobile only

Hello!

I've seen several threads about the same topic but none of the codes seem to work for me, no matter how I adjust them.

How can I get the text in my markdown boxes to view smaller on mobile only?
(Please excuse current state of landing page/everything else - I only began the build this afternoon!)

http://abmv.squarespace.com/?password=abmv123

Thanks so much, you guys are always super helpful! 

If you add a div with a custom class to the text, you can then style that in CSS with a media query and a dynamic font size in VW, something like this:

Markdown:

<div class="dynamic-text">
  <span>
    <strong>
      <em>
      dynamic
      </em>
    </strong>
  </span>
</div>

Custom CSS:

@media only screen and (max-width:767px) {
  .dynamic-text {
    font-size: 12vw;
  }
}

Hi Ziggy,

Thanks so much for your reply.
Sorry, I'm relatively new to markdowns/synatax - how would I use this to change my current code?

Quote

<div style="text-align: right"><span style="color:#215c7d; font-family:Playfair Display; text-align:right; font-size:6em;">***dynamic***</span></div>

I will be having 3 of these headers that will all scroll across so I'll need to apply the same to the white capitalised letters, too.

20 minutes ago, Ziggy said:

Use this in a code block:

<div class="dynamic-text" style="text-align: right">
  <span style="color:#215c7d; font-family:Playfair Display; text-align:right; font-size:6em;">
    ***dynamic***
  </span>
</div>

and this in Custom CSS:

@media only screen and (max-width:767px) {
  .dynamic-text {
    font-size: 12vw;
  }
}

 

Amazing as always, thank you so much!