Jump to content

How to resize Markdown font size for mobile?

Recommended Posts

Hi,

In my website I have a markdown block inserted with an h2 text.

On mobile, however, the h2 size is too large and does not display properly.

I can target h2 individually with simple CSS of course but that does not target the h2 within the Markdown block.

Whatever I do, the h2 does not change size.

 

Is there any CSS or Markdown code that I can use to specifically target the font-size of the content within a markdown block for mobile/tablet?

 

The Markdown code used is this:

<pre><h2><div style="text-align:center"><span style="color:#7B004E">MEER TRAFFIC      |      GEKWALIFICEERDE LEADS      |      MEER SALES</span></div></h2></pre>

 

Thanks!

Boudewijn

Link to comment
  • 9 months later...

@tuanphan

What if you want to do the same thing but are not using H2 in your markdown. For example this is my markdown block and when it turns to mobile, the text gets broken on multiple lines instead of showing as

COLUMBINE
RESIDENCE

Is there a way to target that specific span style?

</div>
<div style="text-align:center; margin-top:-3.5%">

<span style="color:white; font-family:cormorant; font-size:4em; font-weight: 800; letter-spacing: 1rem">

COLUMBINE RESIDENCE  
  </span>

</div>

Link to comment
1 minute ago, StudioRhodes said:

@tuanphan

What if you want to do the same thing but are not using H2 in your markdown. For example this is my markdown block and when it turns to mobile, the text gets broken on multiple lines instead of showing as

COLUMBINE
RESIDENCE

Is there a way to target that specific span style?

</div>
<div style="text-align:center; margin-top:-3.5%">

<span style="color:white; font-family:cormorant; font-size:4em; font-weight: 800; letter-spacing: 1rem">

COLUMBINE RESIDENCE  
  </span>

</div>

Can you share link to page where you inserted Markdown?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
  • 2 weeks later...

Hey, sorry about the delayed response.  For some reason I didn't see that you had responded.  I don't know if I can share a link for you to look at.  I'm in the process of redesign my site and changing templates so everything I see is the preview of the new template (7.0 brine).  Here is the markdown code I'm using...

<span style="font-family:Calluna; font-size:3.3em;">Text Goes Here</span>

I'm just not quite sure how to tweak your code below.

@media screen and (max-width:640px) {
h2 span {font-size: 10px !important;}
}

Let me know.  Really appreciate it!

Link to comment
1 hour ago, CGKids said:

Hey, sorry about the delayed response.  For some reason I didn't see that you had responded.  I don't know if I can share a link for you to look at.  I'm in the process of redesign my site and changing templates so everything I see is the preview of the new template (7.0 brine).  Here is the markdown code I'm using...

<span style="font-family:Calluna; font-size:3.3em;">Text Goes Here</span>

I'm just not quite sure how to tweak your code below.


@media screen and (max-width:640px) {
h2 span {font-size: 10px !important;}
}

Let me know.  Really appreciate it!

Edit to this

<span style="font-family:Calluna; font-size:3.3em;" class="t-text">Text Goes Here</span>

then add this to Design > Custom CSS

@media screen and (max-width:767px) {
	span.t-text {
		font-size: 20px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
On 12/17/2020 at 7:15 AM, tuanphan said:

If you use SS 7.1, use 767

SS 7.0, use 640

Hi there! I'm in a similar situation, unable to get a markdown block to resize in mobile. Tried the suggestions above but still no changes, unfortunately.  The site is https://tan-ellipsoid-z2xw.squarespace.com, pw: testing.

I'm trying to get "MACKENZIE" on a single line in mobile. The markdown block code is

<h1 style="text-align: center" ><span style="font-family: Adobe Garamond Pro; font-size: 75px">LUCIA <span style="font-family: Snell Roundhand; font-size: 90px">& </span> MACKENZIE</h1>

The CSS is

@media screen and (max-width:640px) {
  h1 span.t-text {
    font-size: 60px !important;}
}

I tried changing the CSS to "span.t-text" and "t-text" and "h1 t-text" but none of those worked, nor did changing pixels to rem in the CSS. Thanks in advance for any ideas!

Link to comment
  • 1 year later...

Hi there,

 

I'm having the same issue, but I'm using two mixed fonts in my markdown. I have these throughout my website, can I target the div# in the CSS, as then I use the CSS in this thread for h2 is only changes the mobile size for the cursive font (Duende and not the other). URL: https://midnighthex.com/

Markdown block: What's Your Story (home page 2nd section)

<center> <h2> <span style="font-family: duende-pro;font-size:1.8em;"> What's&nbsp; </span> YOUR STORY? <span style="font-family: duende-pro;font-size:1.8em"> image.thumb.jpeg.4ef66e53bdc5e9ae804feaa89a67abbc.jpeg

 

Desktop.png

Link to comment
On 3/26/2023 at 9:28 PM, Midnighthex_ said:

Hi there,

 

I'm having the same issue, but I'm using two mixed fonts in my markdown. I have these throughout my website, can I target the div# in the CSS, as then I use the CSS in this thread for h2 is only changes the mobile size for the cursive font (Duende and not the other). URL: https://midnighthex.com/

Markdown block: What's Your Story (home page 2nd section)

<center> <h2> <span style="font-family: duende-pro;font-size:1.8em;"> What's&nbsp; </span> YOUR STORY? <span style="font-family: duende-pro;font-size:1.8em"> image.thumb.jpeg.4ef66e53bdc5e9ae804feaa89a67abbc.jpeg

 

Desktop.png

Add to Design > Custom CSS

/* Mobile - What is your story */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1678043489768_51702 h2 {
    font-size: 20px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

Hi there, I am having a similar issue... I would like the markdown text to be much smaller on mobile but can't figure out how to target it since I don't think I assigned it an H1, 2, 3, etc. I just specified the type features in custom CSS.

 <div class="titles"> strategy & planning </div>

Section: What We Do on Homepage.

upyourpr.squarespace.com
PW: uppr2023

Thanks so much!

Screen Shot 2023-05-22 at 6.03.02 PM.png

Screen Shot 2023-05-22 at 6.03.16 PM.png

Link to comment
On 5/23/2023 at 4:09 AM, allisonbaileydesign said:

Hi there, I am having a similar issue... I would like the markdown text to be much smaller on mobile but can't figure out how to target it since I don't think I assigned it an H1, 2, 3, etc. I just specified the type features in custom CSS.

 <div class="titles"> strategy & planning </div>

Section: What We Do on Homepage.

upyourpr.squarespace.com
PW: uppr2023

Thanks so much!

Screen Shot 2023-05-22 at 6.03.02 PM.png

Screen Shot 2023-05-22 at 6.03.16 PM.png

Add this to Design > Custom CSS

@media screen and (max-width:767px) {
[class*="titles"] {
    font-size: 14px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/28/2023 at 11:00 PM, PabloB said:

Same issue here tried every trick. Tried with media screen in custom css.
Now everything on my site is just wonky. fonts not loading properly. Anyone up for looking at my CSS code?
 

What is your site url or link to page where you have problem? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.