Jump to content

Scale down font in one block for mobile

Recommended Posts

I realize this has been covered ad nauseam, but I can't seem to make the CSS code work for me. I need to scale down the font in a section of my page so it doesn't block the image on mobile. Basically, I want the font to be "Heading 3" size on desktop and "Heading 4" size on mobile. Images show what I hope to accomplish (and a screenshot of what I have in reality). Thanks in advance for any help with CSS. 

www.alaskanattorneys.com

 

This is what I want:

Screenshot 2023-08-25 at 4.07.08 PM.png

Screenshot 2023-08-25 at 4.08.16 PM.jpg

 

 

This is what I have:

Screenshot 2023-08-25 at 4.18.41 PM.jpg

Edited by chuckEsleaze
add link to website
Link to comment
  • Replies 5
  • Views 971
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

@chuckEsleaze Currently you've heading 4 for the text. You can first try changing it to heading 3. Then add the following code to reduce the font size only on mobile version:

section[data-section-id="64e906a90f4d42636ecc4d53"] h3 {
	font-size: 1.1rem !important;
}

Change the number 1.1rem in the code to whatever works best for your design. 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
15 minutes ago, Lesum said:

@chuckEsleaze Currently you've heading 4 for the text. You can first try changing it to heading 3. Then add the following code to reduce the font size only on mobile version:

section[data-section-id="64e906a90f4d42636ecc4d53"] h3 {
	font-size: 1.1rem !important;
}

Change the number 1.1rem in the code to whatever works best for your design. 

Hmmm...I must be doing something wrong. I can adjust the font using that code, but it alters the image on my mobile version (zooms way in)

Link to comment
Just now, chuckEsleaze said:

Hmmm...I must be doing something wrong. I can adjust the font using that code, but it alters the image on my mobile version (zooms way in)

As it's supposed to. Font size over the image is supposed to impact the image below. 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.