How to resize Markdown font size for mobile

Hi,
I have one sentence of text on my site that is a different font from elsewhere and so I put it into a markdown box. I am struggling to get it to resize smaller for mobile. This is my markdown code:

<div style="text-align:center"><span style="color: #ffffff; font-family: Libre Baskerville; line-height: 1.4; font-size: 2em;">From initial brand positioning, through to final campaign execution.</span></div>

I didn't assign a heading or paragraph style to it.

Do I add more code into the markdown?

https://chameleon-copper-hgx3.squarespace.com/
Password: gravy2024

Thanks
Laura

 

You can't put media styles inline so add a class and try:

<style>
  @media  (max-width: 767px) {
    .mrk_text {
      font-size: 1rem !important;
    }
  } 
</style>

<span class="mrk_text" style="color: #ffffff; font-family: Libre Baskerville; line-height: 1.4; font-size: 2em;">...

Hi @nick_sh,

Thanks for the response.

I copied this into my markdown box above my existing code, but nothing happened. Have I done it correctly?

Alternatively I did think, that if I put the text in as H1, can I use CSS to target that one text block and tell it to be a different font - Libre Baskerville?

Am I making things more complicated by using a markdown.

<style>
  @media  (max-width: 767px) {
    .mrk_text {
      font-size: 1rem !important;
    }
  } 
</style>

48 minutes ago, dotandpeg said:

I copied this into my markdown box above my existing code, but nothing happened. Have I done it correctly?

Did you add class to span?

49 minutes ago, dotandpeg said:

Alternatively I did think, that if I put the text in as H1, can I use CSS to target that one text block and tell it to be a different font - Libre Baskerville?

Yeah that's also possible