Jump to content

How to resize Markdown font size for mobile

Go to solution Solved by dotandpeg,

Recommended Posts

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

 

 

 

Screenshot 2024-02-15 at 20.49.45.png

Link to comment
  • Replies 4
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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>
Link to comment
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

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.