Scaleupmarketing Posted October 23, 2019 Share Posted October 23, 2019 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
tuanphan Posted October 23, 2019 Share Posted October 23, 2019 @Scaleupmarketing @media screen and (max-width:640px) { h2 span {font-size: 10px !important;} } justin_phang and Scaleupmarketing 2 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Scaleupmarketing Posted October 23, 2019 Author Share Posted October 23, 2019 @tuanphan - you fixed it! Thanks a lot for the quick help! Link to comment
StudioRhodes Posted August 6, 2020 Share Posted August 6, 2020 @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
tuanphan Posted August 6, 2020 Share Posted August 6, 2020 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
StudioRhodes Posted August 6, 2020 Share Posted August 6, 2020 @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 Link to comment
CGKids Posted November 26, 2020 Share Posted November 26, 2020 @StudioRhodes did you ever get an answer to the above question? I have the same one. Let me know. Link to comment
tuanphan Posted December 3, 2020 Share Posted December 3, 2020 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
CGKids Posted December 13, 2020 Share Posted December 13, 2020 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
tuanphan Posted December 13, 2020 Share Posted December 13, 2020 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
CGKids Posted December 16, 2020 Share Posted December 16, 2020 Just curious. Why did you make it 767px instead of 640px? Link to comment
tuanphan Posted December 17, 2020 Share Posted December 17, 2020 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
marginalnote Posted March 2, 2022 Share Posted March 2, 2022 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
marginalnote Posted March 3, 2022 Share Posted March 3, 2022 Wait, never mind––found a few of your other answers and think I got it sorted. Thanks for contributing so much! tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment