How to resize Markdown font size for mobile?

@Scaleupmarketing

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

@tuanphan - you fixed it!

Thanks a lot for the quick help!

@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>

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?

@tuanphan

studiorhodes.net

password: services

The markdown is currently on 2 pages but wilI continue on all project pages when I add more 🙂

Studiorhodes.net/columbine

&

studiorhodes.net/upway

@StudioRhodes did you ever get an answer to the above question?  I have the same one.  Let me know.

On 11/26/2020 at 7:22 PM, CGKids said:

@StudioRhodes did you ever get an answer to the above question?  I have the same one.  Let me know.

If you share link to page where you use Markdown. We can check easier

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!

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

That did it.  Thanks!

Just curious.  Why did you make it 767px instead of 640px?

On 12/16/2020 at 5:11 PM, CGKids said:

Just curious.  Why did you make it 767px instead of 640px?

If you use SS 7.1, use 767

SS 7.0, use 640