Jump to content

Changing font size in markdown on mobile only

Go to solution Solved by Ziggy,

Recommended Posts

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! 

Screenshot 2024-01-19 at 17.55.44.png

Link to comment

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;
  }
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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.

Link to comment
  • Solution

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;
  }
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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

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.